/* @group Example
------------------------------------ */

.hero-small .bp-multimedia {
    width: 100%;
    height: 100%;
}

@media only screen and (min-width : 961px) {}

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

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .hero-small {
    opacity: 0;
    --duration: 1s;
}

:where(#wrapper) .hero-small.animateActive {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
}