.hero-banner-box {
	margin-bottom: 53px;
}

.hero-banner {
	position: relative;
}

.hero-banner::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: radial-gradient(
		circle at -10% -16%,
		rgba(0, 0, 0, 0.75) 0%,
		rgba(0, 0, 0, 0.55) 37%,
		rgba(0, 0, 0, 0.25) 51%,
		rgba(0, 0, 0, 0) 100%
	);
	z-index: 2;
}

.hero-banner__media {
	width: 100%;
	height: 540px;
	display: inline-block;
	object-fit: cover;
	z-index: 1;
}

.hero-banner__textbox {
}

.hero-banner__cta {
	position: absolute;
	bottom: 19px;
	left: 50%;
	transform: translateX(-50%);
}

.hero-banner__cta:hover,
.hero-banner__cta:focus {
	background: var(--secondary-green);
	color: white;
}

.hero-banner__header {
	margin-bottom: 18px;
	color: #001246;
	.colored {
		color: var(--primary-blue);
	}
}

.hero-navigation {
	width: calc(100% - 68px);
	margin: 0 auto;
}

.hero-navigation__list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.hero-navigation__item {
	width: 100%;
}

.hero-navigation__wrapper {
	min-height: 229px;
	padding: 20px 20px 32px 20px;
	display: flex;
	background: rgba(255, 255, 255, 0.99);
	backdrop-filter: blur(2px);
	filter: drop-shadow(0 3px 10px rgba(121, 121, 121, 0.15));
}

.hero-navigation__wrapper::before {
	height: 12px;
}

.hero-navigation__title {
	width: calc(100% - 60px);
}

.hero-navigation__cta {
	position: absolute;
	right: 20px;
	bottom: 39px;
}

@media (min-width: 40em) {
	.hero-navigation__item {
		width: calc(50% - 7px);
	}
}

@media (min-width: 79.375em) {
	.hero-banner-box {
		margin-bottom: 83px;
	}

	.hero-banner {
		min-height: 603px;
	}

	.hero-banner::before {
		content: "";
	}

	.hero-banner__media {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}

	.hero-banner__textbox {
		position: relative;
		z-index: 3;
		color: white;
		padding: 47px;
		padding-bottom: 100px;
		max-width: 792px;
	}

	.hero-banner__header {
		margin-bottom: 30px;
		color: white;

		.colored {
			color: var(--primary-blue);
			text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
		}
	}

	.hero-banner__cta {
		position: relative;
		bottom: initial;
		left: initial;
		transform: initial;
	}

	.hero-navigation {
		position: relative;
		top: -58px;
		z-index: 10;
		margin-bottom: -58px;
	}
}

@media (min-width: 60em) {
	.hero-navigation__item {
		width: calc(25% - 11px);
	}
}