@media (max-width: 800px) {
	:root {
		--body-width: 85vw;
	}

	.static-header {
		flex-direction: column;
	}

	.static-header .socials {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 3em;
	}

	.two-columns {
		column-gap: 2em;
	}
}

@media (max-width: 650px) {
	.brand-heading:has(img) {
		flex-wrap: wrap;
		width: fit-content;
		max-width: 85vw;
		justify-content: center;
		row-gap: 2em;
	}

	nav.beige-strip ul li {
		text-align: center;
		align-content: center;
	}

	.two-columns,
	.teasers {
		flex-direction: column;
	}

	.teasers {
		row-gap: 1.5em;
	}
}