:root {
	--bg:
		linear-gradient(to top, #fff 0, transparent 50%),
		radial-gradient(
			ellipse 146.99% 62% at calc((100% - min(100%, 1264px)) / 2) 50vh,
			#fff 0,
			var(--ui, #d0d4e3) 100%
		),
		#fff;
	--text: rgb(0 38 63);
	--ohio-dark: rgb(0, 38, 63);
	--ohio-blue: rgb(0, 57, 104);
}

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

* {
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: "Gilroy";
	src:
		url("../assets/fonts/gilroy-light-webfont.woff2") format("woff2"),
		url("../assets/fonts/gilroy-light-webfont.woff") format("woff"),
		url("../assets/fonts/gilroy-light.otf") format("opentype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	/* unicode-range: U+0020-007F; */
}

@font-face {
	font-family: "Gilroy";
	src:
		url("../assets/fonts/gilroy-lightitalic-webfont.woff2") format("woff2"),
		url("../assets/fonts/gilroy-lightitalic-webfont.woff") format("woff"),
		url("../assets/fonts/gilroy-lightitalic.otf") format("opentype");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Gilroy";
	src:
		url("../assets/fonts/gilroy-regular-webfont.woff2") format("woff2"),
		url("../assets/fonts/gilroy-regular-webfont.woff") format("woff"),
		url("../assets/fonts/gilroy-regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Gilroy";
	src:
		url("../assets/fonts/gilroy-regularitalic-webfont.woff2") format("woff2"),
		url("../assets/fonts/gilroy-regularitalic-webfont.woff") format("woff"),
		url("../assets/fonts/gilroy-regularitalic.otf") format("opentype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Gilroy";
	src:
		url("../assets/fonts/gilroy-medium-webfont.woff2") format("woff2"),
		url("../assets/fonts/gilroy-medium-webfont.woff") format("woff"),
		url("../assets/fonts/gilroy-medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Gilroy";
	src:
		url("../assets/fonts/gilroy-mediumitalic-webfont.woff2") format("woff2"),
		url("../assets/fonts/gilroy-mediumitalic-webfont.woff") format("woff"),
		url("../assets/fonts/gilroy-mediumitalic.otf") format("opentype");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Gilroy";
	src:
		url("../assets/fonts/gilroy-bold-webfont.woff2") format("woff2"),
		url("../assets/fonts/gilroy-bold-webfont.woff") format("woff"),
		url("../assets/fonts/gilroy-bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Gilroy";
	src:
		url("../assets/fonts/gilroy-bolditalic-webfont.woff2") format("woff2"),
		url("../assets/fonts/gilroy-bolditalic-webfont.woff") format("woff"),
		url("../assets/fonts/gilroy-bolditalic.otf") format("opentype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

body {
	font-family: "Gilroy", system-ui, sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	background-color: var(--bg);
	color: var(--text);
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

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

.content-grid,
.full-width {
	--padding-inline: 2rem;
	--content-max-width: 1200px;

	display: grid;
	grid-template-columns:
		[full-width-start]
		minmax(var(--padding-inline), 1fr)
		[content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width))
		[content-end]
		minmax(var(--padding-inline), 1fr)
		[full-width-end];
}

.content-grid > :not(.full-width),
.full-width > :not(.full-width),
.full-width > :not(.bg-img) {
	grid-column: content;
}

.content-grid > .full-width,
.content-grid > .full-width > .bg-img {
	grid-column: full-width;
}

.pages-nav {
	display: flex;
	gap: 0.5rem;
	padding: 1rem 0;
}

.page-link {
	display: inline-block;
	padding: 0.5rem 1rem;
	background-color: var(--ohio-blue);
	color: white;
	text-decoration: none;
	border-radius: 0.25rem;
	transition: background-color 0.2s ease;
}

.page-link:hover {
	background-color: var(--ohio-dark);
}