.header-container {
	background-color: var(--color-primary);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	min-height: 40rem;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: var(--header-height);
}

.header-title::after {
	content: '';
	display: inline-block;
	width: 10rem;
	height: .2rem;
	background-color: var(--color-accent);
	margin: 2rem auto;
}

.header-title h1,
.header-title .h1 {
	color: inherit !important;
}

.header-image,
.header-image-full {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	overflow: hidden;
}

.header-image-full {
	z-index: 1;
}

.header-image-full img,
.header-image img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}

.header-content {
	position: relative;
	z-index: 4;
	width: 100%;
	padding: clamp(7rem, 10vh, 10rem) calc(var(--block-spacing) * 2);
	max-width: 94rem;
}

.header-split {
	align-items: flex-start;
}

.header-split .header-image {
	width: 33.33%;
	right: inherit;
}

.header-split .header-bg {
	position: absolute;
	inset: 0;
	width: 33.33%;
	height: 100%;
	z-index: 2;
	overflow: hidden;
}

.header-split .header-image img {
	min-width: 300%;
}

.header-split .header-content {
	width: 33.33%;
	padding: 7rem;
	text-align: left;
}

.header-scroll-down {
	--scroll-size: 8rem;

	display: grid;
	grid-template-columns: var(--scroll-size);
	grid-template-rows: auto var(--scroll-size);
	place-content: center;
	place-items: center;
	grid-gap: var(--scroll-size);
	padding-top: 2rem;

	cursor: pointer;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 6;
}

.header-scroll-down > span {
	color: #fff;
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1;
	position: relative;
	overflow: hidden;
	width: auto;
	text-transform: uppercase;
	letter-spacing: .2rem;
	white-space: nowrap;
	text-orientation: mixed;
	writing-mode: vertical-rl;
	rotate: 180deg;
	transition: .12s ease-in-out;
}

.header-scroll-down > i {
	transition: .12s ease-in-out;
}

.highlight-close {
	position: absolute;
	bottom: calc(100% + .3rem);
	right: -.3rem;
	z-index: 6;
	cursor: pointer;
}

.highlight-close > i {
	color: #fff;
}

/* large view */
@media only screen and (max-width: 1539px) {
	.header-scroll-down {
		--scroll-size: 6rem;
	}

	/* .header-split .header-image,
	.header-split .header-bg,
	.header-split .header-content {
		width: 40%;
	} */

	.header-split .header-image img {
		min-width: 250%;
	}

	.header-split .header-content {
		padding: 6rem;
	}

}

/* large view */
@media only screen and (max-width: 1279px) {
    .header-split .header-image,
	.header-split .header-bg,
	.header-split .header-content {
		width: 50%;
	}

	.header-split .header-image img {
		min-width: 200%;
	}

	.header-split .header-content {
		padding: 5rem;
	}
}


/* tablet view */
@media only screen and (min-width: 1024px) {
	.header-scroll-down:hover > span {
		translate: 0 -1rem;
	}

	.header-scroll-down:hover > i {
		color: var(--color-primary);
		translate: 0 .7rem;
	}
}

/* tablet view */
@media only screen and (max-width: 1023px) {
	.header-scroll-down {
		--scroll-size: 3.6rem;
	}

	.header-content {
		padding: 5rem 4rem;
	}

	.header-split .header-content {
		padding: 4rem;
	}
}

/* mobile view */
@media only screen and (max-width: 767px) {
	.header-scroll-down {
		grid-template-rows: var(--scroll-size);
	}

	.header-scroll-down > span {
		display: none !important;
	}

	.header-content {
		padding: 4rem;
	}

	.header-split .header-image,
	.header-split .header-bg,
	.header-split .header-content {
		width: 100%;
	}

	.header-split .header-image img {
		min-width: 100%;
	}

	.header-split .header-bg {
		height: 100%;
		z-index: 1;
	}

	.header-split .header-bg + .header-image-full {
		position: relative;
		z-index: 2;
		height: auto;
		inset: inherit;
		margin-top: calc(0rem - var(--header-height));
	} 

	.header-split .header-bg + .header-image-full img {
		min-height: 30rem;
		max-height: 40rem;
	} 

	.header-split .header-image + .header-image-full {
		display: none;
	} 

}