/* ==========================================================================
   OBJECTS · GRID — a responsive auto-fitting grid. Children claim a minimum
   width (--grid-min) and the track count follows the viewport, no media
   queries. Used for card listings, swatch walls, pricing tiers, dashboards.
   ========================================================================== */

.o-grid {
  display: grid;
  gap: var(--gap, var(--space-md));
  --grid-min: 16rem;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
}

.o-grid--2xs { --grid-min: 8rem; }
.o-grid--xs  { --grid-min: 12rem; }
.o-grid--sm  { --grid-min: 16rem; }
.o-grid--md  { --grid-min: 20rem; }
.o-grid--lg  { --grid-min: 26rem; }

/* Content-sized rows: don't stretch a card to its row's tallest sibling, so a
   listing of headers-only cards (e.g. the country index) reads as one tight,
   deliberate block instead of a head floating over an empty stretched body. */
.o-grid--top { align-items: start; }

/* Fixed column counts, for when the content demands an exact rhythm */
.o-grid--2 { grid-template-columns: repeat(2, 1fr); }
.o-grid--3 { grid-template-columns: repeat(3, 1fr); }
.o-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 56.25rem) {
  .o-grid--2, .o-grid--3, .o-grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  }
}