/*********************************************
 * Report Slider
**********************************************/
.vii-report-slider {
    --flkt-btn-size:47px;
    --offset-arrow:16px;
    --width-right-col:clamp(100px, calc(0.5 * var(--vii-container) - 2 * var(--offset-arrow)), 596px);
    --item-ratio:0.698;
    --item-width:calc(var(--item-ratio) * var(--width-right-col));
    --item-height:calc(var(--item-width) * 555 / 416);
}

/* col */
.vii-report-slider__col {width:50%;}
.vii-report-slider__col.left {max-width:566px; padding-right:20px;}
.vii-report-slider__col.right {min-height:var(--width-right-col);}

/* Left content */
.vii-report-slider__heading {margin-bottom:var(--vii-spacing-32);}
.vii-report-slider__button:not(.active) {
    height:0;width:0;overflow:hidden;opacity:0;visibility:hidden;
    position:absolute;top:0;letter-spacing:0;
}

/* Right content */
.vii-report-slider__right_wrap {width:var(--width-right-col);}
.vii-report-slider__right_wrap.has-bg-img .vii-report-slider__images {position:static;}
.vii-report-slider__slider_wrap {
    width:var(--item-width);
    box-shadow:213px 263px 95px 0 rgba(0, 0, 0, 0.01), 9px 11px 30px 0 rgba(0, 0, 0, 0.28);
    border-top-right-radius:34px;border-bottom-right-radius:34px;
}

/* slider prev, next button */
.vii-report-slider__images .flickity-prev-next-button.previous {
    left:calc(-1 * var(--offset-arrow));
    transform:translate(-100%, -50%);
}
.vii-report-slider__images .flickity-prev-next-button.next {
    right:calc(-1 * var(--offset-arrow));
    transform:translate(100%, -50%);
}
.vii-report-slider__right_wrap.no-bg-img .vii-report-slider__images .flickity-prev-next-button.previous {
    transform:translate(calc(-100% + -1 * var(--offset-arrow)), -50%);
}
.vii-report-slider__right_wrap.no-bg-img .vii-report-slider__images .flickity-prev-next-button.next {
    transform:translate(calc(100% + var(--offset-arrow)), -50%);
}

/* avoid CLS slider */
.vii-report-slider__slider_wrap,
.vii-report-slider__image {height:var(--item-height);}


/*********************************************
 * Responsive Report Slider
**********************************************/
@media screen and (max-width:1400px) {
    .vii-report-slider {
        --offset-arrow:8px;
        --width-right-col:calc(0.5 * var(--vii-container) - 2 * var(--offset-arrow) - 80px);
    }
}
@media screen and (max-width:1024px) {
    .vii-report-slider .flickity-prev-next-button {--flkt-btn-size:32px;--flkt-icon-size:14px;}
}
@media screen and (max-width:920px) {
    .vii-report-slider {
        --width-right-col:calc(var(--vii-container) * 0.75);

        flex-direction:column;
    }
    .vii-report-slider__col {width:100%;}
    .vii-report-slider__col.left {max-width:100%;margin-top:60px;order:1;text-align:center; padding-right:0;}
}
@media screen and (max-width:480px) {
    .vii-report-slider__col.left {margin-top:35px;}
}