.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--space-4);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding: var(--space-7) 0; }
.section--alt { background: var(--c-bg-alt); }
.section__head { margin-bottom: var(--space-6); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
	.section { padding: var(--space-6) 0; }
}