/* @group Generic Content
------------------------------------ */

/* Multimedia Wrapper
--------------------- */
.generic-content .multimedia-wrapper {
	width: 100%;
}
.generic-content .multimedia-wrapper .bp-multimedia {
	height: 50rem;
	position: relative;
}
.generic-content .multimedia-wrapper .bp-multimedia::before {
	content: '';
    background: linear-gradient(180deg, rgba(84, 96, 100, 0.55) 0%, rgba(84, 96, 100, 0.00) 40%);
    background-blend-mode: darken;
    display: block;
    inset: 0;
    position: absolute;
	pointer-events: none;
	z-index: 1;
}

/* Content Wrapper
--------------------- */
.generic-content .content-wrapper {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

@media only screen
and (min-width : 961px) {
	/* Multimedia Wrapper
	--------------------- */
	.generic-content .multimedia-wrapper .bp-multimedia {
		height: 45rem;
	}
}
@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) .generic-content :is(.multimedia-wrapper, .content-wrapper) {
	opacity: 0;
	--duration: 1s;
}
:where(#wrapper) .generic-content.animateActive :is(.multimedia-wrapper, .content-wrapper) {
	animation: fade var(--duration) forwards;
	animation-delay: var(--delay, 0);
}
:where(#wrapper) .generic-content.animateActive :is(.multimedia-wrapper) {
    --delay: 0.3s;
}
:where(#wrapper) .generic-content.animateActive :is(.content-wrapper) {
    --delay: 0.5s;
}