/* Lavender layout primitives */

.lav-container {
	width: min(100% - 2rem, var(--lv-container));
	margin-inline: auto;
}

@media (min-width: 640px) {
	.lav-container {
		width: min(100% - 3rem, var(--lv-container));
	}
}

@media (min-width: 1024px) {
	.lav-container {
		width: min(100% - 4rem, var(--lv-container));
	}
}

.lav-section {
	padding-block: var(--lv-section-y);
}

.lav-section__header {
	margin-bottom: var(--lv-10);
}

.lav-grid--two {
	display: grid;
	gap: var(--lv-8);
}

.lav-hero {
	padding-block: var(--lv-16);
}

.lav-header-spacer {
	height: var(--lav-header-height);
}

@media (min-width: 1024px) {
	.lav-grid--two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}