/* =============================================================================
   Card grids.
   They follow docs/components/sections.md § Services: one gap token
   (--card-grid-gap, already responsive), collapsing to two columns on tablet
   and one on mobile. Desktop-first per contracts.md §2.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   CARD GRIDS
   --------------------------------------------------------------------------- */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--card-grid-gap);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Tablet: everything wider than two columns collapses to two. */
@media (max-width: 900px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: a single column. */
@media (max-width: 600px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}