.hero {
	background: var(--color-white);
	padding: 0 !important;
	height: var(--hero-banner-height);
	height: auto;
}

.hero-banner__item {
	display: grid;
	height: var(--hero-banner-height);
	height: auto;
	background-color: var(--color-dark-blue);
	color: var(--color-white);
	grid-template:
		'text' auto
		'logo' auto / auto;
}

.hero-banner__item--layout-12 {
	background-color: var(--color-white);
	color: var(--color-font);
}

.hero-banner__item--layout-13,
.hero-banner__item--layout-14 {
	background-color: var(--color-light-blue);
}

.hero-banner__text {
	font-size: var(--font-size-super-title);
	font-weight: 600;
	line-height: var(--line-height-super-subtitle);
	grid-area: text;
	padding: var(--hr-spacing-2) var(--vr-spacing-2);
	display: grid;
	align-items: center;
}

.hero-banner__headline {
	max-width: 820px;
}

.hero-banner__logo {
	grid-area: logo;
}

.logo-crop {
	width: auto;
	height: 100%;
}

@media (min-width: 450px) and (max-width: 599px) {
	.hero-banner__logo {
		display: none;
	}
}

@media (min-width: 600px) {
	.hero-banner__item {
		grid-template: 'logo text' 240px / 145px auto;
	}
}

@media (min-width: 1024px) {
	.hero-banner__item {
		grid-template: 'logo text' 340px / 265px auto;
	}
}