/**
 * Grid — 2/3/4 kolommen + split layout
 */

.grid {
	display: grid;
	gap: var(--grid-gap);
}

@media (min-width: 640px) {
	.grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.grid-split {
	display: grid;
	gap: var(--space-8);
	align-items: center;
}

@media (min-width: 900px) {
	.grid-split {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}
}