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

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



@media only screen and (min-width : 961px) {
    /* .split-image-content.reversed .img-left {
        height: 37.7rem;
    } */

    .split-image-content.reversed .bp-column:first-of-type .bp-multimedia {
        height: auto;
    }

    .split-image-content:not(.reversed) .bp-column:last-of-type .bp-multimedia {
        height: auto;
    }

    .split-image-content:not(.reversed) .bp-column:first-of-type .bp-multimedia {
        height: 100%;
    }

    .split-image-content.reversed .bp-column:last-of-type .bp-multimedia {
        height: 100%;
    }
}


@media only screen and (min-width : 0) and (max-width : 960px) {
    .split-image-content .bp-column:first-of-type .bp-multimedia:first-of-type {
        padding-bottom: 1.2rem;
    }

    /* .split-image-content.reversed .img-left {
        height: 24.4rem;
    }

    .split-image-content :is(.hood-symbol, #important) {
        height: 30rem;
    }

    .split-image-content :is(.hood-shopping, #important) {
        height: 30rem;
    } */

}

/* @end */


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



:where(#wrapper) .split-image-content .divided-content>*,
:where(.editor-styles-wrapper) .split-image-content .divided-content .block-editor-block-list__layout>* {
    border-bottom: 1px solid var(--light-purple);
    line-height: 1.4em;
    padding-block: 1rem;
    width: 100%;
}