/**
 * Utility CSS.
 */

.content-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--site-grid-gap);
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.span-1,
.span-2,
.span-3,
.span-4,
.span-5,
.span-6,
.span-7,
.span-8,
.span-9,
.span-10,
.span-11,
.span-12 {
	grid-column: span 1;
}

@media (min-width: 980px) {
	.content-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.col-1, .span-1 { grid-column: span 1; }
	.col-2, .span-2 { grid-column: span 2; }
	.col-3, .span-3 { grid-column: span 3; }
	.col-4, .span-4 { grid-column: span 4; }
	.col-5, .span-5 { grid-column: span 5; }
	.col-6, .span-6 { grid-column: span 6; }
	.col-7, .span-7 { grid-column: span 7; }
	.col-8, .span-8 { grid-column: span 8; }
	.col-9, .span-9 { grid-column: span 9; }
	.col-10, .span-10 { grid-column: span 10; }
	.col-11, .span-11 { grid-column: span 11; }
	.col-12, .span-12 { grid-column: span 12; }
}