/**
 * Containers, grids, section spacing.
 * Figma WebDesign--26 — 12-col / 1320px / 24px gutter; margins via --site-margin-inline.
 * Build step: 4
 */

/* -------------------------------------------------------------------------
   Site container
   ------------------------------------------------------------------------- */

.site-container {
	width: 100%;
	max-width: calc(var(--grid-max-width) + 2 * var(--site-margin-inline));
	margin-inline: auto;
	padding-inline: var(--site-margin-inline);
}

/* -------------------------------------------------------------------------
   12-column grid
   ------------------------------------------------------------------------- */

.site-grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	column-gap: var(--grid-gutter);
}

.col-span-1 {
	grid-column: span 1;
}

.col-span-2 {
	grid-column: span 2;
}

.col-span-3 {
	grid-column: span 3;
}

.col-span-4 {
	grid-column: span 4;
}

.col-span-5 {
	grid-column: span 5;
}

.col-span-6 {
	grid-column: span 6;
}

.col-span-7 {
	grid-column: span 7;
}

.col-span-8 {
	grid-column: span 8;
}

.col-span-9 {
	grid-column: span 9;
}

.col-span-10 {
	grid-column: span 10;
}

.col-span-11 {
	grid-column: span 11;
}

.col-span-12 {
	grid-column: span 12;
}

.col-start-2 {
	grid-column-start: 2;
}

.col-start-3 {
	grid-column-start: 3;
}

.col-start-10 {
	grid-column-start: 10;
}

/* start + span must be one declaration; span-only utilities reset the start line */
.col-start-2.col-span-7 {
	grid-column: 2 / span 7;
}

.col-start-2.col-span-10 {
	grid-column: 2 / span 10;
}

.col-start-3.col-span-8 {
	grid-column: 3 / span 8;
}

.col-start-10.col-span-2 {
	grid-column: 10 / span 2;
}

/* -------------------------------------------------------------------------
   Section spacing (spacing tokens)
   ------------------------------------------------------------------------- */

.section-padding-y {
	padding-block: var(--space-48);
}