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


:where(#wrapper) .slider-aside {
    overflow: hidden;
}

:where(#wrapper) .slider-aside .row:not(.bp-slider) {
    position: relative;
}

.slider-aside .line-wrapper {
    border-right: 1px solid var(--red);
    height: var(--_line-h);
}

.slider-aside .col-content {
    z-index: 1;
}

.slider-aside .slide-overlap {
    z-index: 2;
}


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

    :where(#wrapper) .slider-aside {
        --credits-h: 3rem;
        margin-bottom: calc(var(--credits-h) * -1);
    }

    .slider-aside .bp-icon svg {
        width: var(--size-d-w);
        height: unset;
    }

    :where(#wrapper) .slider-aside .splide__track {
        overflow: visible;
    }

    :where(#wrapper) .slider-aside .splide[initial="true"] .splide__list {
        translate: -2rem 0;
    }

    :where(#wrapper) .slider-aside :is(.col-slider, .splide) {
        position: static;
    }


    :where(#wrapper) .slider-aside .splide__track .splide__slide {
        opacity: 0;
        height: calc(65rem + var(--credits-h));
    }

    :where(#wrapper) .slider-aside .splide__track .splide__slide .bp-multimedia {
        height: 0;
    }

    :where(#wrapper) .slider-aside .splide__track {
        isolation: isolate;
    }

    :where(#wrapper) .slider-aside .splide__track::after {
        content: '';
        background: var(--soft-white);
        position: absolute;
        transform: translate(-50vw, 0);
        width: 50vw;
        left: 50%;
        translate: -50%;
        height: 100%;
        top: 0;
    }

    :where(#wrapper) .slider-aside .splide__track .splide__slide p {
        opacity: 0;
        padding-top: 1rem;
        position: absolute;
    }

    .slider-aside .splide__arrows {
        width: calc(var(--_calc) - 1.5rem) !important;
        padding: 4rem !important;
        transform: translate(-2rem, 0);
    }

    .slider-aside .splide__track .splide__slide:is(.is-next, .is-active) {
        opacity: 1;
    }

    .slider-aside .splide__track .splide__slide.is-next .bp-multimedia {
        height: 47.5rem;
        opacity: 0.4;
    }

    .slider-aside .splide__track .splide__slide.is-active .bp-multimedia {
        height: 65rem;
    }

    .slider-aside .splide__track .splide__slide.is-active p {
        opacity: 1;
    }

    .slider-aside .line-wrapper {
        width: 18.3rem;
    }

    .slider-aside .slide-overlap {
        gap: 0 !important;
    }

    .slider-aside .line-wrapper {
        height: 41.8rem;
    }

    .slider-aside .col-content p {
        padding-right: 10.2rem;
    }


}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .slider-aside .slide-overlap {
        position: static !important;
    }

    .slider-aside .bp-icon svg {
        width: var(--size-m-w, var(--size-d-w));
        height: unset;
        color: var(--white) !important;
    }

    .slider-aside {
        --offset_top: 3rem;
    }

    .slider-aside .splide__track .splide__slide .bp-multimedia {
        height: 37rem;
    }

    .slider-aside :is(.bp-slider, #important) {
        margin-top: var(--offset_top);
        width: 71.13vw !important;
        margin-left: auto;
        margin-right: 0;
    }

    .slider-aside :is(.splide__arrows, #important) {
        width: 100% !important;
        padding: 2rem !important;
        top: 18.7rem;
    }

    .slider-aside .col-content {
        position: static;
    }

    .slider-aside .line-wrapper {
        position: absolute;
        bottom: 0;
        width: 2.2rem;
        height: calc(var(--_line-h) + var(--offset_top));
    }

    .slider-aside .slide-overlap {
        padding-top: 6.15rem;
        padding-inline: 0 !important;
    }

    .slider-aside .splide__slide p {
        margin-top: 1rem;
    }


}

/* @end */


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

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


/* CMS */

.editor-styles-wrapper .slider-aside .splide__slide {
    width: 50rem;
}
.editor-styles-wrapper .slider-aside .splide__slide .bp-multimedia {
    height: 65rem;
}

.editor-styles-wrapper .slider-aside .slide-content {
    padding-top: 3rem;
}

.editor-styles-wrapper .slider-aside [data-type="bp-core/bp-slide-overlap"] {
    display: none;
}