/* ABOUTME: Styles for the inner hero section with background image and content overlay. */
/* ABOUTME: Configurable height via CSS custom property and rounded corners. */
section.section--hero .content_wrapper {
	padding-block: 5vw;
	border-radius: var(--rbr);
	overflow: hidden;
	height: var(--content_height, auto);
	position: relative;
}

section.section--hero .hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

section.section--hero .content_wrapper:before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		180deg,
		rgba(99, 199, 210, 1) 0%,
		rgba(99, 199, 210, 0.8) 50%,
		rgba(42, 123, 155, 0) 100%
	);
	z-index: 88;
	pointer-events: none;
	content: "";
	display: block;
}

section.section--hero .column {
	z-index: 99;
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	align-items: center;
	justify-content: center;
	flex-direction: row;
}
section.section--hero .column .button {
	align-self: center;
}

@media screen and (max-width: 768px) {
	section.section--hero .content_wrapper {
		height: auto;
		min-height: 50vw;
		padding-block: 8vw;
	}
}