/* home.css */
.page-head {
}

.hero-image {
	grid-area: hero;
	align-self: start;

	display: block;
	max-width: 98ch;
	margin-block: var(--spacing);
	background-size: contain;

	&::before {
		content: '';
		position: absolute;
		grid-area: 1 / L / B / C;
		inset: 0;
		z-index: 0;
		scale: 1.75;
		background-position: center;
		background-size: contain;
		background-image: var(--hero-image);
	}
	.page-title {
		grid-column: C;
		grid-row: auto;
	}
}

.page-title {
	.inverted {
		background-color: transparent;
	}
}

.page-main,
.page-foot {
	max-width: min(80vw, 100ch);
}

.page-section {
  place-content: center;
	padding-inline: var(--sizefl-4);

	h2:first-of-type {
		margin: 1ex auto;
	}
	h2:first-of-type span {
		padding-block: 1ex;
	}
}

main h2:first-of-type {
	border-block: 2px solid currentColor;
	margin-inline: var(--space-inside);
	span {
		display: inline-block;
		padding-block: calc(1ex + 2vw);
	}
}
.page-foot {
	background-image: none;
	margin: -1px auto;
}

@media (min-width: 100em) {
	#waves {
		display: none;
		use { animation: none }
	}

	body {
		display: grid;
		grid-template-columns: 5vw 1fr 1fr 5vw;
		grid-template-rows: var(--size-5) 1fr auto;
		grid-template-areas: ". nav nav ." ". hero main ." ". . foot .";
		gap: 0;
		place-items: center;
	}

	.page-head,
	.page-main,
	.page-foot {
		width: 100%;
		max-width: unset;
	}
	.page-head {
		grid-area: hero;
		height: 100%;
		margin: auto;
		display: block;
	}
	.hero-image::before {
		scale: 1;
		background-position: center 5rem;
	}
	.page-main {
		grid-area: main;
	}
	.page-section {
		aspect-ratio: 1;
		place-content: center;
	}
	.page-head, 
	.page-main {
		filter: drop-shadow(0 0 1ex oklch(0 0 0 / 20%));
	}
	.page-foot {
		grid-area: foot;
		max-width: 65vw;
		&::before {
			content: none;
		}
	}
}