/**
 * Site-wide layout styles.
 */

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	color: var(--tf-color-text);
	background-color: var(--tf-color-background);
	font-family: var(--tf-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
}

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

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

@media (min-width: 768px) {
	.tf-container {
		width: min(
			calc(100% - (var(--tf-space-7) * 2)),
			var(--tf-width-content)
		);
	}

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