.grid-cardlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 6%;
  justify-content: center;
  margin: 10px auto;
  overflow-wrap: break-word; 
}

@media screen and (max-width: 420px) {
  .grid-cardlist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px 3%;
    justify-content: center;
    margin: 10px auto;
    overflow-wrap: break-word; 
  }
}

.grid-cardlist > li{
  list-style: none;
  line-height: 1;
}

.grid-cardlist li img{
    	border: 1px solid #f2f2f2;
    margin: 5px auto 10px auto;
	box-shadow: rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
	-webkit-box-shadow: rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
	-moz-box-shadow: rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
}

.grid-cardlist li a:hover img{
  opacity: 0.5;
}


.grid-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 40px;
}
.grid-steps > li:nth-child(4n) {
  grid-column-start: 1;

}
.grid-steps > li::after {
  justify-self: end;
  content: '→';
}