.ds-hero-banner__top {
	position: relative;
}

.ds-hero-banner__background {
	position: absolute;
	width: 100vw;
	height: 100%;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-inline-size: initial;
}

.ds-hero-banner__background img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ds-hero-banner__top-inner {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-height: 374px;
	padding-block: 40px;
}

.ds-hero-banner__info {
	position: relative;
	max-width: 732px;
	padding: 20px;
	border-radius: 25px;
	backdrop-filter: blur(40px);
	background: radial-gradient(
		ellipse at center,
		rgba(238, 238, 238, 0.4) 16%,
		rgba(199, 199, 199, 0.325) 58%,
		rgba(159, 159, 159, 0.25) 100%
	);
}

.ds-hero-banner .ds-hero-banner__info .ds-hero-banner__heading.ds-hero-banner__heading h1 {
	font-weight: 800;
	color: #fff;
	text-align: center;
	text-wrap: initial;
}

.ds-hero-banner__widget {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: #eee;
	margin-top: 20px;
}

.ds-hero-banner__widget .umbrella-widget > div > a {
	color: inherit !important;
}

.ds-hero-banner__widget .umbrella-widget > div > a:hover {
	text-decoration: underline !important;
}

.ds-hero-banner__bottom {
	position: relative;
}

.ds-hero-banner__bottom:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background-color: #055e37;
	z-index: -1;
}

.ds-hero-banner__bottom-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block: 30px;
}

.ds-hero-banner__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 25px;
}

.ds-hero-banner__card-link {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid #2F7958;
	background-color: #2f7958;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 700;
	color: #fff;
	padding: 11px 20px;
	border-radius: 15px;
	text-decoration: none;
	transition: background-color 0.4s ease, border-color 0.4s ease;
}

.ds-hero-banner__card-link:after {
	content: '';
	display: block;
	mask-image: url("data:image/svg+xml,%3Csvg width='11' height='17' viewBox='0 0 11 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.987732 0.00220664C1.26071 -0.0153873 1.53003 0.072769 1.74066 0.247324L1.74359 0.249277L10.6293 7.70436C10.7449 7.79992 10.8398 7.92023 10.9037 8.05592C10.9675 8.19141 11.0003 8.33977 11.0004 8.48951C11.0004 8.6394 10.9675 8.78844 10.9037 8.92408C10.8405 9.05844 10.7472 9.17662 10.6332 9.27174L1.74359 16.7522L1.74164 16.7542C1.53128 16.9289 1.26159 17.0165 0.988708 16.9993C0.715539 16.9819 0.458543 16.8606 0.271912 16.6604L0.270935 16.6585C0.17686 16.5565 0.104066 16.4358 0.0580444 16.3049C0.012133 16.1742 -0.00716768 16.035 0.00238029 15.8967C0.0119985 15.7585 0.0502252 15.6234 0.113708 15.5003C0.177243 15.3772 0.265471 15.2679 0.372497 15.1799L8.32367 8.49049L0.374451 1.82057C0.267396 1.73265 0.178261 1.62431 0.114685 1.50123C0.0513053 1.37837 0.0140971 1.24362 0.00433342 1.10572C-0.00535566 0.967639 0.0123944 0.828199 0.0580444 0.697519C0.103739 0.566921 0.176403 0.446924 0.269958 0.34498L0.271912 0.34205C0.45825 0.141873 0.714805 0.0199608 0.987732 0.00220664Z' fill='white'/%3E%3C/svg%3E%0A");
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	width: 11px;
	height: 17px;
	flex-shrink: 0;
	background-color: currentColor;
	opacity: 0;
	margin-left: auto;
	transition: opacity 0.4s ease;
}

@media (hover: hover) {
	.ds-hero-banner__card-link:hover {
		border-color: #fff;
		background: #055E37;
	}

	.ds-hero-banner__card-link:hover:after {
		opacity: 1;
	}
}

.ds-hero-banner__card-link:active {
	border-color: #fff;
	background: #044E2E;
}

.ds-hero-banner__card-link:active:after {
	opacity: 1;
}

.ds-hero-banner__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}

.ds-hero-banner__card-icon img {
	object-fit: contain;
}

.ds-hero-banner__disclosure {
	display: grid;
	grid-template-rows: auto 0fr;
	align-content: start;
	transition: grid-template-rows 0.3s ease;
}

.ds-hero-banner__disclosure.is-open {
	grid-template-rows: auto 1fr;
}

.ds-hero-banner__disclosure.is-open .ds-hero-banner__disclosure-chevron {
	transform: rotate(180deg);
}

.ds-hero-banner__disclosure-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-weight: 500;
}

.ds-hero-banner__disclosure-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ds-hero-banner__disclosure-chevron {
	display: flex;
	transition: transform 0.3s ease;
}

.ds-hero-banner__disclosure-text {
	overflow: hidden;
	color: #eee;
}

.ds-hero-banner__disclosure-text-inner {
	text-align: center;
}

.ds-hero-banner__disclosure-text-entry {
	font-size: 12px;
	line-height: 1.5;
	padding-top: 10px;
}

.ds-hero-banner__disclosure-text-inner .ds-hero-banner__disclosure-text-entry.ds-hero-banner__disclosure-text-entry a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Small desktop */

@media screen and (max-width: 1199px) {
	.ds-hero-banner__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tablet */

@media screen and (max-width: 1023px) {
	.ds-hero-banner__top-inner {
		padding-block: 158px 20px;
		justify-content: center;
	}

	.ds-hero-banner__card-link {
		font-size: 16px;
		padding: 10px 20px;
	}

	.ds-hero-banner__card-link:after {
		width: 7px;
		height: 10px;
		opacity: 1;
	}

	.ds-hero-banner__card-icon {
		width: 32px;
		height: 32px;
	}
}

/* Mobile */

@media screen and (max-width: 767px) {
	.ds-hero-banner__top-inner {
		padding-block: 229px 40px;
	}

	.ds-hero-banner__cards {
		grid-template-columns: 100%;
		grid-gap: 20px;
	}

	.ds-hero-banner__bottom-inner {
		padding-block: 20px;
	}
}

/* Mobile small */

@media screen and (max-width: 374px) {
	.ds-hero-banner__info {
		padding: 20px 15px;
		border-radius: 20px;
	}
}