@font-face {
	font-family: 'noto-sans-extralight';
	src: url('../../fonts/public/noto-sans/noto-sans-extralight.woff2') format('woff2');
}

@font-face {
	font-family: 'noto-sans-light';
	src: url('../../fonts/public/noto-sans/noto-sans-light.woff2') format('woff2');
}

@font-face {
	font-family: 'source-sans-3-regular';
	src: url('../../fonts/public/source-sans-3/source-sans-3-regular.woff2') format('woff2');
}

@view-transition {
	navigation: auto;
}

main {
	display: grid;
	gap: 5rem 0;
	padding-bottom: 7rem;

	>img {
		anchor-name: --banner-img;
		height: 375px;
	}

	h1 {
		white-space: pre-line;
		text-align: left;
		padding-inline: 10vw;
		position: absolute;
		position-anchor: --banner-img;
		justify-self: anchor-left;
		bottom: anchor(bottom);
		margin-bottom: 1em;
		font-family: 'noto-sans-extralight', sans-serif;
	}

	h1+p {
		white-space: pre-line;
		text-align: center;
		font-size: 1.75em;
		padding-inline: 10vw;
		position: absolute;
		position-anchor: --banner-img;
		right: anchor(right);
		top: anchor(top);
		margin-top: 1em;
		font-family: 'noto-sans-extralight', sans-serif;
	}

	div {
		display: grid;
		gap: inherit;
	}

	ul {
		display: grid;
		row-gap: 2rem;
		column-gap: inherit;
		column-count: 3;
	}

	figure {
		display: grid;
		gap: 1rem 0;
	}

	hgroup {
		display: grid;
		gap: 1rem 0;
	}

	section {
		display: grid;
		gap: 2.5rem 3.25rem;
		padding-inline: 10vw;

		&:has(>div) {
			align-items: start;
		}

		p {
			text-indent: 50px;
		}
	}

	@media screen and (width<=768px) {
		section:has(article, figure) {
			justify-items: center;

			article,
			figure {
				max-width: 360px;
			}
		}
	}

	@media screen and (541px <=width) {
		>img {
			height: 550px;
		}
	}

	@media screen and (1024px <=width) {
		>img {
			height: auto;
		}

		h1 {
			padding-inline: 7.5vw;
		}

		section {
			padding-inline: 17.5vw;
		}
	}

	@media screen and (1280px <=width) {
		h1 {
			padding-inline: 7.5vw;
		}

		section {
			padding-inline: 7.5vw;
			grid-template-columns: repeat(3, 1fr);
			gap: 2.75rem 4vw;

			>img {
				height: 100%;
			}
		}
	}
}