section.hero {
	background-color: var(--secondary-accent-color);
	display: flex;
	width: 100%;
	position: relative;
	line-height: 0;
	border-bottom: 10px solid var(--secondary-accent-color);
	min-height: 300px;
}

section.hero video {
	width: 100%;
	aspect-ratio: 1920/430;
	object-fit: cover;
}

section.hero .images {
	width: 100%;
	aspect-ratio: 1920/430;
	display: flex;
}

section.hero .images img {
	width: 100%;
	object-fit: cover;
}

section.hero .images > img + img {
	display: none;
}

section.hero.overlay::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 2;
	pointer-events: none;
	mix-blend-mode: multiply;
}

section.hero.overlay[data-overlay-opacity="0"]::after { opacity: 0; }
section.hero.overlay[data-overlay-opacity="0.1"]::after { opacity: 0.1; }
section.hero.overlay[data-overlay-opacity="0.2"]::after { opacity: 0.2; }
section.hero.overlay[data-overlay-opacity="0.3"]::after { opacity: 0.3; }
section.hero.overlay[data-overlay-opacity="0.4"]::after { opacity: 0.4; }
section.hero.overlay[data-overlay-opacity="0.5"]::after { opacity: 0.5; }
section.hero.overlay[data-overlay-opacity="0.6"]::after { opacity: 0.6; }
section.hero.overlay[data-overlay-opacity="0.7"]::after { opacity: 0.7; }
section.hero.overlay[data-overlay-opacity="0.8"]::after { opacity: 0.8; }
section.hero.overlay[data-overlay-opacity="0.9"]::after { opacity: 0.9; }
section.hero.overlay[data-overlay-opacity="1"]::after { opacity: 1; }

section.hero .wrap {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 100%;
	left: 0;
	right: 0;
	width: 100%;
	display: flex;
	align-items: center;
	color: var(--secondary-accent-text-color);
	z-index: 8;
	line-height: 1.6;
}

section.hero .wrap .text {
	padding: 40px;
	background-color: var(--secondary-accent-color);
}

section.hero.overlay-single-color::after {
	background-color: var(--secondary-accent-color);
}

section.hero.overlay-gradient::after {
	background-color: #fff;
	background-image: linear-gradient(90deg, var(--primary-accent-color), transparent, var(--secondary-accent-color));
}


@media only screen and (min-width: 980px) {
	section.hero .images.slick-slider,
	section.hero .images.slick-slider img {
		max-width: 100vw;
		align-content: center;
		display: flex;
	}	
	section.hero .images.slick-slider img {
		height: 22.4vw;
		min-height: 300px;
	}
}

@media only screen and (max-width: 980px) {
	section.hero .images,
	section.hero video {
		aspect-ratio: auto;
		width: auto;
		height: auto;
		max-height: 300px;
	}

	section.hero .images.slick-slider,
	section.hero .images.slick-slider img {
		max-width: 100%;
		width: 100vw;
		min-height: 300px;
		height: 22.4vw;
	}


}