/*
    Header
*/
header {
	display: block;
	position: relative;
}

.banner-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "content";
	place-content: center;
	place-items: center;
	gap: 0;
}

.banner-image-float {
	background-image: url('/wp-content/themes/main/images/bg-noise-512x512.png');
	background-repeat: repeat;
	background-position: center;
	background-size: 256px 256px;
	background-blend-mode: overlay;
}

.banner-image-fill {
	position: relative;
}

.banner-image-fill .container {
	position: relative;
	z-index: 2; 
}

.banner-image-fill .banner-image {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	z-index: 1;
}

.banner-image-fill .banner-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.banner-image-float .banner-grid {
	grid-template-rows: auto auto;
	grid-template-areas: "image" "content";
}

.banner-image-float.banner-home .banner-grid {
	grid-template-rows: auto auto;
	grid-template-areas: "content" "image";
}

.banner-grid .banner-content {
	text-align: center;
	grid-area: content;
	padding: var(--padding-rows) 0;
	width: 100%;
}

.banner-grid .banner-image img {
	display: block;
	width: 100%;
	height: auto;
}

.banner-title {
	font-size: clamp(3rem, 5vw, 8.4rem);
	line-height: 1;
	word-break: keep-all;
	overflow-wrap: normal;
}

.banner-home .banner-grid {
	position: relative;
	z-index: 3;
}

.banner-video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
}

.banner-video::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: url('/wp-content/themes/main/images/bg-noise-512x512.png');
	background-repeat: repeat;
	background-position: center;
	background-size: 256px 256px;
	mix-blend-mode: overlay;
}

.banner-video > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.banner-video video::-webkit-media-controls {
  display:none !important;
}

.banner-video .mobile-video,
.banner-video .tablet-video,
.banner-video .desktop-video {
	display: none;
}

.banner-home h1 > span:nth-child(1) {
	color: var(--color-grey-3);
}

.banner-home h1 > span {
	display: inline-block;
}

@media (min-width: 576px) {
	
}

@media (max-width: 767px) {
	.banner-video .mobile-video {
		display: block;
	}

	.banner-home .banner-grid {
		min-height: clamp(60rem, 150vw, 100rem);
	}
}

@media (min-width: 768px) {

}

@media (min-width: 768px) and (max-width: 1023px) {
	.banner-video .tablet-video {
		display: block;
	}

	.banner-home .banner-grid {
		min-height: clamp(77rem, 100vw, 100rem);
	}
}

@media (max-width: 1023px) {
	.banner-content {
		position: relative;
	}

	.banner-image-float .banner-grid {
		position: relative;
	}

	.banner-grid .banner-image {
		padding: 1rem 0;
		grid-area: image;
		width: 100%;
		position: relative;
	}

	.banner-grid .banner-image img {
		max-width: 30rem;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}

	.banner-image-float.banner-home .banner-grid .banner-image img {
		max-width: clamp(30rem, 70vw, 60rem);
		width: 100%;
	}

	.banner-image-float:not(.banner-home) .banner-content::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		translate: -50% 0;
		width: 200%;
		height: 0;
		border-top: .1rem solid var(--color-grey);
		opacity: .5;
		z-index: 1;
	}

	.banner-grid .banner-image::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 200%;
		height: 14.5rem;
		translate: -50% -50%;
		background-image: url('/wp-content/themes/main/images/pattern-grey.svg');
		background-position: left 0.3rem;
		background-repeat: repeat;
		background-size: 3.2rem 5.8rem;
		opacity: .5;
		z-index: 1;
	}

	.banner-home .banner-grid .banner-image::after {
		top: 20%;
	}

	.banner-home h1 {
		margin-top: 0.1em;
	}

	.banner-home h1 > span {
		display: block;
	}
}

@media (min-width: 1024px) {
	.banner-title {
		line-height: 0.85;
	}

	.banner-image-float .banner-grid,
	.banner-image-float.banner-home .banner-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		grid-template-areas: "content image";
		gap: 5rem;
	}

	.banner-image-float .banner-grid .banner-content {
		text-align: left;
	}

	.banner-grid .banner-image {
		grid-area: image;
		width: 100%;
		margin-bottom: -10%;
		height: 110%;
		aspect-ratio: 4 / 3;
		position: relative;
		z-index: 2;
	}

	.banner-grid .banner-image img {
		height: 100%;
		max-height: none;
		object-fit: contain;
		object-position: center;
	}

	.banner-image-float .banner-grid {
		position: relative;
	}

	.banner-image-float .banner-grid::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(75% + 1.25rem);
		width: 38.3rem;
		height: 100%;
		translate: -50% 0;
		background-image: url('/wp-content/themes/main/images/pattern-grey.svg');
		background-position: left bottom;
		background-repeat: repeat;
		background-size: 3.2rem 5.8rem;
		opacity: .5;
		z-index: 1;
	}

	.banner-video .desktop-video {
		display: block;
	}

	.banner-home .banner-grid {
		padding: var(--padding-rows) 0;
	}

	.banner-home .banner-grid .banner-image {
		aspect-ratio: 1 / 1;
	}

	.banner-home h1 {
		margin-top: 0.1em;
		margin-left: -0.05em;
	}

	.banner-home h1 > span:nth-child(2) {
		margin-left: 0.96em;
	}
}

@media (min-width: 1280px) {
	.banner-image-float .banner-grid {
		gap: 6rem;
	}

	.banner-image-float .banner-grid::after {
		left: calc(75% + 1.5rem);
	}
}

@media (min-width: 1540px) {
	.banner-image-float .banner-grid {
		gap: 7rem;
	}

	.banner-image-float .banner-grid::after {
		left: calc(75% + 1.75rem);
	}
}