/*********************************************
 * Image slider
**********************************************/
.vii-image-slider {
    --slide-space:24px;
    --slide-w:250px;
    --item-offset-left-right:var(--vii-gap-side);
    --w-odd:clamp(470px, 53.68vw, 770px);
    --w-even:clamp(246px, 37.98vw, 546px);
    --img-aspect:1;
}
.vii-image-slider__items {
    /* fix cls */
    min-height:calc(var(--w-odd) * (1 / (770 / 480)));
}
.vii-image-slider__header {gap:16px;padding:0 var(--vii-gap-side);}
.vii-image-slider__image:nth-child(odd) {--slide-w:var(--w-odd);--img-aspect:770/480;}
.vii-image-slider__image:nth-child(even) {--slide-w:var(--w-even);--img-aspect:546/340;}
.vii-image-slider__image {
    width:calc(var(--slide-w) + var(--slide-space));
    padding:0 calc(var(--slide-space) / 2);
}
.vii-image-slider__image:first-child {
    width:calc(var(--slide-w) + var(--item-offset-left-right) + (var(--slide-space) / 2));
    padding-left:var(--item-offset-left-right);
}
.vii-image-slider__image:last-child:not(:first-child) {
    width:calc(var(--slide-w) + var(--item-offset-left-right) + (var(--slide-space) / 2));
    padding-right:var(--item-offset-left-right);
}
.vii-image-slider__image-bg {aspect-ratio:var(--img-aspect);}
.vii-image-slider__image-bg img {transition:transform .5s ease;}

/* a11y */
.vii-image-slider__image-bg.a11y-focus-inset:focus,
.vii-image-slider__image-bg.a11y-focus-inset:after {border-radius:8px;}

/*********************************************
 * Image slider Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .vii-image-slider {--slide-space:var(--vii-gap-container);}
    .vii-image-slider__nav {display:none;}
    .vii-image-slider__header:has(:not( > .vii-image-slider__heading)) {margin-bottom:0;}
}
@media only screen and (max-width:480px) {
    .vii-image-slider {--w-odd:70vw;--w-even:50vw;}
}