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

.full-image .bp-group .bp-multimedia {
    height: 100%;
    width: 100%;
}


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

@media only screen and (min-width : 0) and (max-width : 960px) {
    .full-image:not(.small-mobile) .bp-group .bp-multimedia {
        height: 150vw;
    }
    .full-image:is(.small-mobile) .bp-group .bp-multimedia {
        height: 56.13vw;
    }
}

/* @end */


/* Animations
------------------------------------ */
@media only screen 
and (min-width : 961px) {
    :where(#wrapper) .full-image .bp-multimedia {
        background: var(--white);
        clip-path: inset(3%);
        transition: all 1.5s;
    }
    :where(#wrapper) .full-image.animateActive .bp-multimedia {
        clip-path: inset(0);
    }
}
@media only screen and (min-width : 0) and (max-width : 960px) {
    :where(#wrapper) .full-image > :is(.row, .bp-group) {
        opacity: 0;
        --duration: 1s;
    }
    :where(#wrapper) .full-image.animateActive > :is(.row, .bp-group) {
        animation: fade var(--duration) forwards;
        animation-delay: var(--delay, 0);
        --delay: 0.3s;
    }
}