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

.hero-secondary .group-image .bp-multimedia {
    width: 100%;
    height: 100%;
}
.hero-secondary .credit-wrapper {
    margin: 1rem 0 0;
}

.hero-secondary .credit-wrapper {
    margin-top: 1rem;
}

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

    .hero-secondary .group-image {
        border-bottom: 1px solid var(--tower-red);
    }

    .hero-secondary .group-image {
        margin-top: 2.5rem;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .hero-secondary .group-image {
        margin-top: 3rem;
    }
}

/* @end */


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

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

:where(#wrapper) .hero-secondary.animateActive {
    --delay: 0.3s;
}