.storyline-grid {
    position: relative;
    background: var(--timeless-noir, #121212);
    padding-block: 13rem;
    isolation: isolate;
}

.storyline-grid.without-bg {
    background-image: none;
    padding-block: 0;
}

.storyline-grid::after,
.storyline-grid::before {
    content: '';
    position: absolute;
    background-size: contain;
    z-index: -1;
    background-repeat: no-repeat;
}

.storyline-grid.without-bg::after,
.storyline-grid.without-bg::before {
    display: none;
}

.storyline-grid__row:first-child .storyline-grid__column::before,
.storyline-grid__column::after {
    content: "";
    width: 1px;
    height: 10rem;
    background-color: var(--blossom);
    display: block;
}

.storyline-grid__column::after {
    margin: 5rem auto;
}

.storyline-grid__row:first-child .storyline-grid__column::before {
    margin: 0 auto 5rem;
}

.storyline-grid__outer-slider {
    padding-left: 3rem;
}

.storyline-grid__outer-slider .splide__slide {
    /* width: 31.3rem; */
    height: 25rem;
}

.storyline-grid__column p {
    --lh: 1.5em;
    --ls: 0.08em;
}

.storyline-grid-wrapper:not(.without-bg)+.container {
    background: none !important;
}

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

    .storyline-grid::after {
        top: -40rem;
        left: 0;
        width: 44rem;
        height: 106.9rem;
        background-image: url(../../img/patterns/storyline-grid/deco-left-m.png);
        max-width: 100vw;
        background-position: left top;
    }

    .storyline-grid::before {
        bottom: -53.7rem;
        right: 0;
        background-image: url(../../img/patterns/storyline-grid/deco-right-m.png);
        width: 41.8rem;
        height: 95.9rem;
        max-width: 100vw;
        background-position: right top;
    }



    .storyline-grid__outer-slider .splide {
        width: 97.04vw;
    }

    .storyline-grid__outer-slider {
        overflow: hidden;
        width: 100vw;
    }
    .storyline-grid-wrapper .storyline-grid__column {
        padding: 0 2rem;
    }
    .storyline-grid > div:nth-last-child(2) .storyline-grid__column::after {
        margin: 5rem auto 13rem;
    }
}

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

    .storyline-grid {
        position: relative;
        padding-block: 0 40rem;
        padding-bottom: 6rem;
    }


    .storyline-grid::after {
        top: -92.2rem;
        right: 0;
        width: 105.1rem;
        height: 222.9rem;
        background-image: url(../../img/patterns/storyline-grid/deco-right.png);
    }

    .storyline-grid::before {
        bottom: -54.7rem;
        left: 0;
        background-image: url(../../img/patterns/storyline-grid/deco-left.png);
        width: 124.2rem;
        height: 247.7rem;
    }

    .storyline-grid__row:first-child .storyline-grid__column::before,
    .storyline-grid__column::after {
        height: 20rem;
    }

    .storyline-grid__column::after {
        margin: 10rem auto;
    }

    .storyline-grid__row:first-child .storyline-grid__column::before {
        margin: 0 auto 10rem;
    }

    .storyline-grid__column {
        padding-inline: 3.6rem !important;
    }

    .storyline-grid__column p {
        --fs: 2rem;
    }

    .storyline-grid__outer-slider {
        padding: 0;
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% 0;
        width: 100%;
        max-width: 144rem;
        height: 100%;
        z-index: var(--z-index-lowest);
        pointer-events: none;
        padding-left: unset;
    }

    .storyline-grid__outer-slider .splide,
    .storyline-grid__outer-slider .splide__track,
    .storyline-grid__outer-slider .splide__list {
        width: 100%;
        height: 100%;
    }

    .storyline-grid__outer-slider .splide__slide {
        position: absolute;
        top: 0;
        left: 0;
        z-index: var(--z-index-lowest);
    }

    .storyline-grid__outer-slider .splide__slide:nth-child(1) {
        top: 0;
        left: 66.66%;
        width: calc(24.99% - 1.2rem);
        height: 30.2rem;
    }

    .storyline-grid__outer-slider .splide__slide:nth-child(2) {
        top: 77rem;
        left: 0;
        width: calc(33.32% - 1.2rem);
        height: 35.2rem;
    }

    .storyline-grid__outer-slider .splide__slide:nth-child(3) {
        top: 155rem;
        left: 66.66%;
        width: calc(33.32% - 1.2rem);
        height: 32rem;
    }

    .storyline-grid__outer-slider .splide__slide:nth-child(n+4),
    .one-row .storyline-grid__outer-slider .splide__slide:nth-child(n+2),
    .two-rows .storyline-grid__outer-slider .splide__slide:nth-child(n+3),
    .three-rows .storyline-grid__outer-slider .splide__slide:nth-child(n+4) {
        display: none;
    }

    body:is(.home) .storyline-grid__outer-slider .splide__slide:nth-child(1) {
        width: calc(33.99% - 1.2rem);
        height: 30.2rem;
    }

    body:is(.home) .storyline-grid__outer-slider .splide__slide:nth-child(2) {
        width: calc(28.32% - 1.2rem);
        height: 23rem;
    }


}