/* Base layout: mobile-first */
#product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

/* Tablet: 3 columns */
@media (min-width: 600px) {
  #product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Laptop: 4 columns */
@media (min-width: 900px) {
  #product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Desktop: 5 columns */
@media (min-width: 1500px) {
  #product-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}