/*
 * ILM Components -- Row.
 *
 * Twelve equal tracks. Columns span them; anything that does not fit wraps to
 * the next line by itself, because that is what a grid does with more items
 * than tracks.
 *
 * `minmax(0, 1fr)` rather than `1fr`. A grid track's automatic minimum size is
 * `auto`, which means "at least as wide as the content" -- so one long URL or
 * an unbreakable word in a column makes that track wider than its share and
 * pushes the row past its container. `minmax(0, …)` removes that floor, and it
 * is the single most common reason a CSS grid overflows.
 *
 * The column gap is at most a twelfth of the row (1.23.0). Twelve tracks have
 * eleven gaps between them whether or not any column is narrower than the
 * row, so a gap `g` needs a row at least `11g` wide: a 64px gap made a phone
 * row 704px wide however the columns stacked. Bounded by `100% / 12`, eleven
 * gaps take at most eleven twelfths and the tracks always keep the rest, so
 * the row is never wider than its container. A gap already within the bound
 * -- every gap on a desktop row, and the small ones everywhere -- is exactly
 * what it was. Rows keep the whole gap: stacked columns are never squeezed.
 */

.ilm-component--layout-row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	row-gap: var(--ilm-c-gap);
	column-gap: min(var(--ilm-c-gap), 100% / 12);
	align-items: var(--ilm-c-align);
}