/*********************************************
 * Image slider
**********************************************/
.vii-image-slider {
    --slide-space:12px;
    --slide-w:440px;
    --ratio:440/548;
}
.is-vertical-rect {--slide-w:440px;}
.is-horizontal-rect {--slide-w:670px; --ratio:670/448;}

.vii-image-slider__image {width:calc(var(--slide-w) + var(--slide-space)); padding:0 var(--slide-space);}
.vii-image-slider__image-bg img {transition:transform .5s ease;}
.vii-image-slider__image-bg {aspect-ratio:var(--ratio);}

.vii-image-slider__image:first-child {
    width:calc(var(--slide-w) + var(--vii-gap-side));
    padding-left:calc(var(--vii-gap-side));
}
.vii-image-slider__image:last-child {
    width:calc(var(--slide-w) + var(--vii-gap-side));
    padding-right:calc(var(--vii-gap-side));
}

/* scale animation */
.vii-image-slider__image-bg {overflow:hidden;}
.vii-image-slider__image-bg img {transition:transform 1.5s ease;}
.vii-image-slider__image:not(.animated) .vii-image-slider__image-bg img {transform:scale(1.3);}

/* hover */
.vii-image-slider__image-bg:hover img {transform:scale(1.03);}
.vii-image-slider__image-bg:not(:hover):before {opacity:0;}
.vii-image-slider__image-bg:before {
    z-index:2;
    background-color:rgba(0, 0, 0, .2);
    transition:all .3s ease;
}

/* a11y */
.vii-image-slider__image-bg.a11y-focus-inset:focus-visible,
.vii-image-slider__image-bg.a11y-focus-inset:after {}

/*********************************************
 * Image slider Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    .vii-image-slider {
        --slide-space:6px;
        --slide-w:30vw;
    }
    .is-vertical-rect {--slide-w:30vw;}
    .is-horizontal-rect {--slide-w:45vw;}
}
@media only screen and (max-width:480px) {
    .vii-image-slider {
        --slide-w:75vw;
    }
    .is-vertical-rect {--slide-w:75vw;}
    .is-horizontal-rect {--slide-w:75vw;}

    .vii-image-slider__header {margin-bottom:var(--vii-spacing-32);}
}