@media screen and (max-width: 1300px) {
  .product-grid-section--cafes .coffee-item,
  .product-grid-section--thes .coffee-item {
    grid-column: span 5 / span 5;
  }

  .product-grid-section--infusions .coffee-item {
    grid-column: span 6 / span 6;
  }
}

@media screen and (max-width: 600px) {
  .product-grid-section .coffee-item {
    grid-column: span 12 / span 12;
  }
}