/* ==========================================================================
   Products: card grid (cards themselves live in components.css)
   ========================================================================== */

.products__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-top: clamp(28px, 4vw, 56px);
}

@media (max-width: 900px) {
  .products__grid > .card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .products__grid {
    gap: 14px;
  }
}