/***************************************
 * Scroll Frames - General
***************************************/
.vii-scroll-frames {
    --scroll-element:3;
    --hlt-opacity:1;
    --hlt-scale:1;
    --key-transform:0;
    --key-gap:45px;

    --width-image:100vw;
    --width-title:50vw;
    --width-key-figure:100vw;
}

/* Highlighted Text */
.vii-scroll-frames__highlighted-text-inner span {max-width:770px;}

/* Key Figures */
.vii-scroll-frames__key-figures-items {gap:var(--key-gap);}
.vii-scroll-frames__key-figures-item-number-wrapper {
    font-size:100px; line-height:1; font-weight:400;
    margin-bottom:10px;
}
.vii-scroll-frames__key-figures-item-text {font-size:var(--vii-size-24);}
.vii-scroll-frames__key-figures-item-number .text-hide {opacity:0;pointer-events:none;}

/***************************************
 * Scroll Frames - Desktop
***************************************/
@media only screen and (min-width:1024px) {
    .vii-scroll-frames {min-height:calc(6 * var(--vii-100vh));}

    /* background */
    .vii-scroll-frames__image-bg {height:var(--vii-100vh);}

    /* highlighted text */
    .vii-scroll-frames__highlighted-text-inner {
        min-height:var(--vii-100vh); opacity:var(--hlt-opacity); padding:var(--vii-spacing-default) var(--vii-gap-side);
        transform:scale(var(--hlt-scale));
    }

    /* key figures */
    .vii-scroll-frames__key-figures {min-height:var(--vii-100vh);}
    .vii-scroll-frames__key-figures-inner {
        width:calc(100vw + var(--width-image) + var(--width-title) + var(--width-key-figure));
        padding-left:100vw;

        /* animation */
        transform:translateX(calc(-75% * var(--key-transform)));
    }

    /* key figures > image */
    .vii-scroll-frames__key-figures-image {width:var(--width-image); padding:0 var(--vii-gap-side);}

    /* key figures > heading */
    .vii-scroll-frames__key-figures-heading {width:var(--width-title); padding-right:var(--vii-gap-container);}

    /* key figures > items */
    .vii-scroll-frames__key-figures-items {width:var(--width-key-figure);}
    .vii-scroll-frames__key-figures-item:not(:last-child) {
        padding-right:var(--key-gap);
        border-right:1px solid rgba(255, 255, 255, 0.45);
    }
}

/***************************************
 * Scroll Frames - Responsive
***************************************/
@media only screen and (max-width:1180px) {
    .vii-scroll-frames {
        --width-title:80vw;
        --width-key-figure:125vw;
        --key-gap:24px;
    }

    /* key figures */
    .vii-scroll-frames__key-figures-item-number-wrapper {font-size:72px;}
    .vii-scroll-frames__key-figures-item-text {font-size:20px;}
}
@media only screen and (max-width:1023px) {
    .vii-scroll-frames {
        --key-gap:0px;
        padding:var(--vii-spacing-default) var(--vii-gap-side);
    }

    /* key figure > bg */
    .vii-scroll-frames__image-bg {position:static;height:100%;}

    /* highlighted text */
    .vii-scroll-frames__highlighted-text {position:static;margin-bottom:24px;}

    /* key figures */
    .vii-scroll-frames__key-figures-inner {position:static;flex-direction:column;}

    /* key figures > hide bg */
    .vii-scroll-frames__key-figures-image {display:none;}

    /* key figures > heading */
    .vii-scroll-frames__key-figures-heading {--vii-size-h2:var(--vii-size-h4);}

    /* key figures > items*/
    .vii-scroll-frames__key-figures-items {padding-top:40px;flex-wrap:wrap;}
    .vii-scroll-frames__key-figures-item {
        width:calc(50% - var(--key-gap) / 2);text-align:center;padding:20px;
        border-bottom:1px solid rgba(255, 255, 255, 0.45);border-right:1px solid rgba(255, 255, 255, 0.4);
    }

    /* key figures > border */
    .vii-scroll-frames__key-figures-item:nth-child(even) {border-right:none;}
    .vii-scroll-frames__key-figures-item:last-child,
    .vii-scroll-frames__key-figures-item:nth-child(odd):nth-last-child(2) {border-bottom:none;padding-bottom:0;}
    .vii-scroll-frames__key-figures-item:first-child,
    .vii-scroll-frames__key-figures-item:nth-child(2) {padding-top:0;}
    .vii-scroll-frames__key-figures-item-number-wrapper {
        display:flex;justify-content:center;text-align:center;
        margin-bottom:0;
    }
}
@media only screen and (max-width:480px) {
    .vii-scroll-frames__key-figures {overflow:visible;}
    .vii-scroll-frames__key-figures-item-number-wrapper {font-size:36px;margin-bottom:4px;}
    .vii-scroll-frames__key-figures-item-text {font-size:14px;}
    .vii-scroll-frames__key-figures-items {
        width:var(--vii-100vw);
        margin-left:calc(-1 * var(--vii-gap-side)); margin-right:calc(-1 * var(--vii-gap-side));
    }
}