/* @group Example
------------------------------------ */
.full-image-with-description .bp-multimedia {
	height: 37.5rem;
}
@media only screen and (min-width: 961px) {
	.full-image-with-description .bp-multimedia {
		height: 80rem;
	}
}
@media only screen and (min-width: 961px) and (max-width: 1440px) {
}
@media only screen and (min-width: 0) and (max-width: 960px) {
}

/* @end */

/* ANIMATION */
:where(#wrapper) .full-image-with-description :is(h2, p, .bp-multimedia) {
	opacity: 0;
}
:where(#wrapper) .full-image-with-description .row.animateActive :is(h2, p, .bp-multimedia) {
	animation-delay: var(--delay, 0);
}
:where(#wrapper) .full-image-with-description .row.animateActive .bp-multimedia {
	animation: fade var(--anim-duration) ease forwards;
	--delay: 0.3s;
}
:where(#wrapper) .full-image-with-description .row.animateActive h2 {
	animation: fadeLeft var(--anim-duration) ease forwards;
	--delay: 0.4s;
}
:where(#wrapper) .full-image-with-description .row.animateActive p {
	animation: fadeRight var(--anim-duration) ease forwards;
	--delay: 0.4s;
}