.scrolling-screen {
    --cp-var: 55%;
}

@media (min-aspect-ratio: 16/9) {
    .scrolling-screen {
        --cp-var: 40%;
    }
}


.img-full {
    width: 100%;
    display: block;
}

.scrolling-screen__inner {
    width: calc(100% - 32px);

    position: relative;
    margin: 0 auto;
}
@media screen and (min-width: 769px)  {
    .scrolling-screen__inner {
        width: calc(91.66% - 48px);
    }
}

.scrolling-screen__img-outer {
    position: relative;
}
.scrolling-screen__img {
    position: relative;
    z-index: 1;
}
.scrolling-screen__img-lowres {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (min-width: 769px)  {
    .scrolling-screen__inner {
        max-width: 91.66%;
    }
}


@media screen and (min-width: 769px) {
    .scrolling-screen__frame {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .scrolling-screen__frame-border {
        width: calc(100%);
        flex-shrink: 0;
        display: block;
        position: relative;
        left: 0;
        padding-top: var(--cp-var);
        border: 8px solid var(--text-color);
        z-index: 1;
    }

    .scrolling-screen__frame-edge-top {
        width: 100%;
        padding-top: calc((100vh - (var(--cp-var))) / 2);
        position: absolute;
        top: -1px;
        left: 0;
        background: linear-gradient(to bottom, #2d2d2d, rgba(45, 45, 45, 0.8));
    }
    .scrolling-screen__frame-edge-bottom {
        width: 100%;
        padding-top: calc((100vh - (var(--cp-var))) / 2);
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(to top, #2d2d2d, rgba(45, 45, 45, 0.8));
    }
    .scrolling-screen__img-outer {
        margin-top: -100vh;
    }
    .scrolling-screen__img,
    .scrolling-screen__img-lowres {
        padding-top: calc((100vh - (var(--cp-var))) / 2);
        padding-bottom: calc((100vh - (var(--cp-var))) / 2);
    }
}



@media screen and (max-width: 768px) {
    /* .scrolling-screen {
        padding-bottom: 120px;
    } */
    .scrolling-screen__img-outer {
        border: 8px solid var(--text-color);
    }
}

img {
    transition: opacity ease 0.8s;
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    ::-ms-clear {
        width: 0px;
        height: 0px;
        display: none;
    }
    .scrolling-screen__frame {
        display: none;
    }
}