.hero {
	background: var(--color-white);
	padding: 0;
}

.hero__item {
	display: grid;
}

.hero__item--layout-0,
.hero__item--layout-10,
.hero__item--layout-13 {
	grid-template:
		'. . .' var(--vr-spacing-3)
		'. text .' auto
		'medium medium medium' auto
		'. logos .' auto
		'. . .' var(--vr-spacing-3) / var(--hr-spacing-2) 1fr var(--hr-spacing-2);
	justify-content: center;
}

.hero__item--layout-11 {
	grid-template:
		'medium' 316px
		'text' auto
		/ auto;
}

.hero__item--layout-12 {
	grid-template:
		'text' 364px
		'medium' 316px
		/ auto;
}

.hero__text {
	grid-area: text;
	order: 2;
	text-shadow: 0 0 5px var(--color-white);
	z-index: 10;
}

.hero__item--layout-0 .hero__text,
.hero__item--layout-10 .hero__text,
.hero__item--layout-13 .hero__text {
	width: 100vw;
	max-width: 310px;
	align-self: start;
}

.hero__item--layout-11 .hero__text {
	padding: var(--vr-spacing-2) var(--hr-spacing-2);
}

.hero__item--layout-12 .hero__text {
	padding: var(--vr-spacing-2) var(--hr-spacing-2);
}

.hero__item--textcolor-white .hero__text {
	color: var(--color-white);
	text-shadow: 0 0 5px var(--color-font);
}

.hero__item--layout-0 .heading--hero,
.hero__item--layout-10 .heading--hero,
.hero__item--layout-13 .heading--hero {
	margin: 0;
}

.hero__item--layout-0 .hero__subheader,
.hero__item--layout-10 .hero__subheader,
.hero__item--layout-13 .hero__subheader {
	font-size: var(--font-size-copytext-super);
	line-height: var(--font-size-copytext-super);
}

.hero__medium {
	grid-area: medium;
	height: 350px;
	object-fit: cover;
	align-self: center;
	order: 1;
}

a.hero__medium {
	transition: transform 1s var(--animation-timing-function);
}

a.hero__medium:hover {
	transform: scale(1.025);
}

.hero__item--layout-10 .hero__medium {
	height: var(--hero-height);
	grid-area: unset;
	grid-column: 1/-1;
	grid-row: 1/-1;
}

.hero__item--layout-11 .hero__medium {
	height: 100%;
}

.hero__item--layout-12 .hero__medium {
	height: 316px;
	max-width: 400px;
	justify-self: center;
}

.hero__item--layout-13 .hero__medium {
	height: 400px;
	justify-self: center;
}

.hero__item--layout-12 .hero--medium__overlapping {
	opacity: 0.4;
}

.hero__item--layout-0 .hero__logos,
.hero__item--layout-10 .hero__logos,
.hero__item--layout-13 .hero__logos {
	grid-area: logos;
	justify-self: end;
	max-width: 200px;
	display: grid;
	justify-items: end;
	align-self: end;
	grid-template-rows: 33px 19px 28px;
	order: 3;
}

.hero__logo {
	width: 70%;
}

.hero__item--textcolor-white .hero__logo {
	filter: brightness(0) invert(1);
}

.hero__logo:first-of-type {
	width: 50%;
}

.hero__coop {
	font-size: var(--font-size-copytext-small);
	line-height: var(--line-height-copytext-small);
	text-shadow: 0 0 3px var(--color-white);
}

.hero__item--textcolor-white .hero__coop {
	color: var(--color-white);
	text-shadow: 0 0 3px var(--color-font);
}

/* hero swiper */
.hero .swiper-pagination {
	position: absolute;
}

.hero .swiper-pagination-bullet {
	opacity: 1;
	background: var(--color-dark-gray-trans);
	border: 1px solid var(--color-light-gray);
}

.hero .swiper-pagination-bullet-active {
	transform: scale(1.5);
}

@media screen and (min-width: 900px) {
	.hero {
		height: var(--hero-height);
	}

	.hero__item {
		height: var(--hero-height);
	}

	.hero__item--layout-0,
	.hero__item--layout-10 {
		grid-template:
			'. . . . .' var(--vr-spacing-3) '. text . logos .' auto
			'. . . . .' var(--vr-spacing-3) / var(--hr-spacing-2) minmax(
				auto,
				calc(var(--content-width) * 0.5)
			)
			0
			minmax(auto, calc(var(--content-width) * 0.5)) var(--hr-spacing-2);
	}

	.hero__item--layout-11 {
		grid-template:
			'. .' auto
			'. text' minmax(min-content, 300px) '. .' var(--vr-spacing-2) / auto 570px;
	}

	.hero__item--layout-12 {
		grid-template:
			'text medium' auto
			/ 50%;
	}

	.hero__item--layout-0 .hero__text,
	.hero__item--layout-10 .hero__text {
		align-self: center;
	}

	.hero__item--layout-11 .hero__text {
		background: var(--color-white);
	}

	.hero__item--layout-0 .hero__medium,
	.hero__item--layout-10 .hero__medium,
	.hero__item--layout-11 .hero__medium {
		grid-area: unset;
		grid-column: 1/-1;
		grid-row: 1/-1;
		width: 100%;
		height: auto;
	}

	.hero__item--layout-10 .hero__medium,
	.hero__item--layout-11 .hero__medium {
		height: var(--hero-height);
	}

	.hero__item--layout-12 .hero__medium {
		height: auto;
		max-width: none;
	}
}

@media screen and (min-width: 1100px) {
	.hero__item--layout-13 {
		grid-template:
			'. . . . .' var(--vr-spacing-3) '. text medium logos .' auto
			'. . . . .' var(--vr-spacing-3) / var(--hr-spacing-2) auto minmax(auto, 544px) auto var(
				--hr-spacing-2
			);
	}

	.hero__item--layout-13 .hero__text {
		align-self: center;
	}

	.hero__item--layout-13 .hero__medium {
		grid-area: unset;
		grid-column: 1/-1;
		grid-row: 1/-1;
		width: auto;
		height: auto;
		max-height: 547px;
	}
}

@media screen and (min-width: 1300px) {
	.hero__item--layout-0,
	.hero__item--layout-10,
	.hero__item--layout-13 {
		grid-template-columns:
			auto calc(var(--content-width) * 0.5) 0 calc(var(--content-width) * 0.5)
			auto;
	}

	.hero__item--layout-12 .hero__text {
		padding-left: 0;
		max-width: calc(var(--content-width) / 2);
		justify-self: right;
	}

	.hero__item--layout-13 .hero__medium {
		max-height: 680px;
	}
}