/* @group Hero Image
------------------------------------ */
.hero-image {
	position: relative;
	height: 100vh;
	height: 100svh;
}
.hero-image .row {
	height: 100%;
}
.hero-image .text-wrapper {
	z-index: calc(var(--z-index-lowest) + 1);
}
.hero-image .multimedia-wrapper {
	position: absolute;
	inset: 0;
	width: 100%;
	z-index: var(--z-index-lowest);
}
/* Text Wrapper
----------------------*/
.hero-image .text-wrapper :is(.button-wrapper, .information-wrapper) {
	width: 100%;
}
/* Multimedia Wrapper
----------------------*/
:where(#wrapper) .hero-image .multimedia-wrapper {
	pointer-events: none;
}
.hero-image .multimedia-wrapper .bp-multimedia {
	height: 100%;
	width: 100%;
}
.hero-image .multimedia-wrapper .bp-multimedia :is(.img-box, .video-box)::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--overlayColor);
	z-index: calc(var(--z-index-lowest) + 1);
}

@media only screen
and (min-width : 961px) {
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .hero-image :is(.multimedia-wrapper, .text-wrapper) {
	opacity: 0;
	--duration: 1s;
}
:where(#wrapper) .hero-image.animateActive :is(.multimedia-wrapper, .text-wrapper) {
	animation: fade var(--duration) forwards;
	animation-delay: var(--delay, 0);
}
:where(#wrapper) .hero-image.animateActive :is(.multimedia-wrapper) {
    --delay: 0.1s;
}
:where(#wrapper) .hero-image.animateActive :is(.text-wrapper) {
    --delay: 0.4s;
}


/* Editor
------------------------------------ */
:where(.editor-styles-wrapper) .hero-image .text-wrapper {
	padding-top: 10rem;
}
:where(.editor-styles-wrapper) .hero-image .multimedia-wrapper {
	height: 100vh;
}