/* ─── Container ──────────────────────────────────────────── */

.container {
  width: 100%;
  padding-inline: var(--grid-margin);
}

/* ─── Grid ───────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(4, 1fr);   /* Narrow < 768px */
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(8, 1fr); /* Regular 768–1279px */
  }
}

@media (min-width: 1280px) {
  .grid {
    grid-template-columns: repeat(12, 1fr); /* Desktop ≥ 1280px */
  }
}

/* ─── Breakpoint reference ───────────────────────────────── */
/* Narrow:   360–767px  · 4 cols  · ~16–20px margin · ~12–14px gutter */
/* Regular:  768–1279px · 8 cols  · ~20–32px margin · ~14–18px gutter */
/* Desktop: 1280–2560px · 12 cols · ~32–64px margin · ~18–24px gutter */