:root{
    --slider-height-number: 800;
    --slider-height-factor: calc(var(--slider-height-number) / 55);
    --slider-height: calc(var(--text-size-number) * var(--slider-height-factor) * 1px);
    --slider-control-height-number: 100;
    --slider-control-height-factor: calc(var(--slider-control-height-number) / 55);
    --slider-control-height: calc(var(--text-size-number) * var(--slider-control-height-factor) * 1px);
    --slider-text-padding-top-number: 15;
    --slider-text-padding-top-factor: calc(var(--slider-text-padding-top-number) / 55);
    --slider-text-padding-top: calc(var(--text-size-number) * var(--slider-text-padding-top-factor) * 1px);
    --slider-text-padding-left-number: 30;
    --slider-text-padding-left-factor: calc(var(--slider-text-padding-left-number) / 55);
    --slider-text-padding-left: calc(var(--text-size-number) * var(--slider-text-padding-left-factor) * 1px);
}

[data-layout="vertical_duo_slider"]{
    height: var(--slider-height);
}

[data-layout="vertical_duo_slider"].small-section-gap{
    height: calc(var(--slider-height) + (var(--small-section-gap) * 2));
}

[data-layout="vertical_duo_slider"] .sliders {
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    left: 0;
    height: var(--slider-height);
    /* width: 100%; */
    right: 0;
}

[data-layout="vertical_duo_slider"] .img-slider,
[data-layout="vertical_duo_slider"] .text-slider {
    width: 50%;
    height: var(--slider-height);
    z-index: 1;
}

[data-layout="vertical_duo_slider"] .img-slide,
[data-layout="vertical_duo_slider"] .text-slide,
[data-layout="vertical_duo_slider"] .image{
    width: calc(100% + 2px);
    height: calc(var(--slider-height) + 2px);
    margin-top: -1px;
    margin-left: -1px;
    max-height: unset;
}

[data-layout="vertical_duo_slider"] .image{
    object-fit: cover;
    aspect-ratio: unset;
}

[data-layout="vertical_duo_slider"] .text-slide{
    padding: var(--slider-text-padding-top) var(--slider-text-padding-left);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    background-color: #27c2e9;
}

[data-layout="vertical_duo_slider"] .controls{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

[data-layout="vertical_duo_slider"] .up,
[data-layout="vertical_duo_slider"] .down{
    position: absolute;
    height: var(--slider-control-height);
    width: 50%;
    cursor: pointer;
    z-index: 2;
}

[data-layout="vertical_duo_slider"] .up{
    top: 0;
    left: 0;
    right: 50%;
}

[data-layout="vertical_duo_slider"] .down{
    bottom: 0;
    left: 50%;
    right: 0;
}

[data-layout="vertical_duo_slider"] .up svg,
[data-layout="vertical_duo_slider"] .down svg{
    object-fit:contain;
    width:100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
}

@media only screen and (max-width: 998.99991px){
    :root{
        --slider-height-number: 600;
        --image-slider-height-percent: 0.9;
        --text-slider-height-percent: calc(2 - var(--image-slider-height-percent));
        --slider-image-height-number: calc(var(--slider-height-number) * var(--image-slider-height-percent));
        --slider-image-height-factor: calc(var(--slider-image-height-number) / 55);
        --slider-image-height: calc(var(--text-size-number) * var(--slider-image-height-factor) * 1px);
        --slider-text-height-number: calc(var(--slider-height-number) * var(--text-slider-height-percent));
        --slider-text-height-factor: calc(var(--slider-text-height-number) / 55);
        --slider-text-height: calc(var(--text-size-number) * var(--slider-text-height-factor) * 1px); 
    }

    [data-layout="vertical_duo_slider"]{
        height: calc((var(--slider-height) * 2));
    }

    [data-layout="vertical_duo_slider"].small-section-gap{
        height: calc((var(--slider-height) * 2) + (var(--small-section-gap) * 2));
    }

    [data-layout="vertical_duo_slider"] .sliders {
        height: calc(var(--slider-height) * 2);
        flex-direction: column;
    }

    [data-layout="vertical_duo_slider"] .img-slider, 
    [data-layout="vertical_duo_slider"] .text-slider{
        width: 100%;
    }

    [data-layout="vertical_duo_slider"] .text-slide{
        padding-left: calc(var(--slider-text-padding-left) + var(--navigation-space));
    }

    [data-layout="vertical_duo_slider"] .up,
    [data-layout="vertical_duo_slider"] .down{
        width: calc(100% - (var(--slider-text-padding-left) + var(--navigation-space)));
        left: calc(var(--slider-text-padding-left) + var(--navigation-space));
        /* width: 100%;
        left: 0; */
        right: 0;
    }

    [data-layout="vertical_duo_slider"] .img-slide, 
    [data-layout="vertical_duo_slider"] .image,
    [data-layout="vertical_duo_slider"] .img-slider {
        height: calc(var(--slider-image-height) + 3px);
    }

    [data-layout="vertical_duo_slider"] .text-slide,
    [data-layout="vertical_duo_slider"] .text-slider{
        height: calc(var(--slider-text-height));
    }
}

@media only screen and (max-width: 767.99991px){
    :root{
        --slider-height-number: 550;
        --image-slider-height-percent: 0.75;
    }
}

@media only screen and (max-width: 579.99991px){
    :root{
        --image-slider-height-percent: 0.95;
    }

    [data-layout="vertical_duo_slider"] .text-slide{
        padding-left: calc(var(--gap) / 2);
        padding-right: calc(var(--gap) / 2);
    }

    [data-layout="vertical_duo_slider"] .controls .down,
    [data-layout="vertical_duo_slider"] .controls .up {
        width:100%;
    }
}