body {
	min-width: 320px;
	overflow-x: hidden;
	background: var(--color-bg);
}

#main-content {
	overflow-x: clip;
}

::selection {
	color: var(--color-chalk);
	background: var(--color-accent);
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
}

.container {
	width: min(calc(100% - (var(--margin-desktop) * 2)), var(--content-max-width));
	margin-inline: auto;
}

.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gap-desktop);
}

.section {
	padding-block: var(--space-section);
}

.section--compact {
	padding-block: var(--space-4xl);
}

.flow > * + * {
	margin-block-start: var(--space-lg);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 1023px) {
	.container {
		width: min(calc(100% - (var(--margin-tablet) * 2)), var(--content-max-width));
	}

	.grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: var(--gap-tablet);
	}
}

@media (max-width: 767px) {
	html {
		scroll-behavior: auto;
	}

	.container {
		width: min(calc(100% - (var(--margin-mobile) * 2)), var(--content-max-width));
	}

	.grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--gap-mobile);
	}

	.section {
		padding-block: clamp(80px, 20vw, 128px);
	}

	.section--compact {
		padding-block: var(--space-3xl);
	}
}