/* Grid — auto-fill grid layout primitive.
 * Renders children into a CSS grid that fills available width with as many
 * columns as fit at the chosen min width. Variants are switched via class
 * names; see GridComponent.
 */

.grid {
  display: grid;
}

.grid--min-xs { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.grid--min-sm { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid--min-md { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--min-lg { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.grid--min-xl { grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); }

.grid--gap-xs { gap: 0.25rem; }
.grid--gap-sm { gap: 0.5rem;  }
.grid--gap-md { gap: 1rem;    }
.grid--gap-lg { gap: 1.5rem;  }
.grid--gap-xl { gap: 2rem;    }