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

.split-aside-image {}

.split-aside-image .bp-group .bp-multimedia {
    height: 100%;
}


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

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

/* @end */


/* Animations
------------------------------------ */
@media only screen 
and (min-width : 961px) {
    :where(#wrapper) .split-aside-image .wp-block-heading {
        translate: 0 20% 0;
        --duration: 1s;
    }
    :where(#wrapper) .split-aside-image .wp-block-heading.animateActive {
        animation: fullUp var(--duration) forwards;
        animation-delay: var(--delay, 0);
        --delay: 0.3s;
    }
    :where(#wrapper) .split-aside-image .bp-multimedia {
        background: var(--white);
        clip-path: inset(2%);
        transition: all 1.5s;
    }
    :where(#wrapper) .split-aside-image.animateActive .bp-multimedia {
        clip-path: inset(0);
    }
}

@media only screen 
and (min-width : 0) 
and (max-width : 960px) {
    :where(#wrapper) .split-aside-image .bp-column {
        opacity: 0;
        --duration: 1s;
    }
    :where(#wrapper) .split-aside-image.animateActive .bp-column {
        animation: fade var(--duration) forwards;
        animation-delay: var(--delay, 0);
        --delay: 0.3s;
    }
}