.band {


  width: 90%;


  max-width: 1240px;


  margin: 0 auto;


  display: grid;


  grid-template-columns: 1fr;


  grid-template-rows: auto;


  grid-gap: 20px;


}


@media (min-width: 30em) {


  .band {


    grid-template-columns: 1fr 1fr;


  }


}


@media (min-width: 60em) {


  .band {


    grid-template-columns: repeat(4, 1fr);


  }


}





.cart {


  background: #f3f3f3;


  text-decoration: none;


  color: #444;


  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);


  display: flex;


  flex-direction: column;


  min-height: 100%;


  position: relative;


  top: 0;


  transition: all 0.1s ease-in;


}


.cart:hover {


  top: -2px;


  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);


}


.cart article {


  padding: 20px;


  flex: 1;


  display: flex;


  flex-direction: column;


  justify-content: space-between;


}


.cart h1 {


  font-size: 20px;


  margin: 0;


  color: #333;


}


.cart p {


  flex: 1;


  line-height: 1.4;


}


.cart span {


  font-size: 12px;


  font-weight: bold;


  color: #999;


  text-transform: uppercase;


  letter-spacing: 0.05em;


  margin: 2em 0 0 0;


}


.cart .thumb {


  padding-bottom: 60%;


  background-size: cover;


  background-position: center center;


}





@media (min-width: 60em) {


  .item-1 {


    grid-column: 1/span 2;


  }


  .item-1 h1 {


    font-size: 24px;


  }


}