/*********************************************
 * Story Slider
**********************************************/
.vii-story-slider {
    --item-width:calc(var(--vii-container) * 1181 / 1344);
    --item-gap:77px;
}

/* header */
.vii-story-slider__header {gap:var(--vii-gap-container);}

/* slider */
.vii-story-slider__items .flickity-slider {margin-left:calc(var(--vii-gap-side));}

/* slider > item */
.vii-story-item {
    width:calc(var(--item-width) + var(--item-gap));
    padding-right:var(--item-gap);
}
.vii-story-item__thumbnail {width:55.88%;}
.vii-story-item__thumbnail-bg {aspect-ratio:660/442;}
.vii-story-item__info {width:44.12%; padding-left:24px;}

/* slider > arrow */
.vii-story-slider__nav.flickity-button-relative {gap:3px;}
.vii-bg-tertiary .flickity-prev-next-button,
.vii-bg-light-gray .flickity-prev-next-button {
    --flkt-border-color:var(--vii-color-blue);
}

/* slider > avoid cls */
.vii-story-slider__items {
    min-height:calc(0.5588 * var(--item-width) * 442 / 660);
}


/*********************************************
 * Story Slider - Responsive
**********************************************/
@media only screen and (max-width:1280px) {
    .vii-story-slider {--item-gap:40px;}
}

@media only screen and (max-width:767px) {
    .vii-story-slider {
        --item-width:calc(var(--vii-container) * 0.7);
        --item-gap:var(--vii-gap-container);
    }

    /* slider > item */
    .vii-story-item__inner {flex-direction:column;gap:16px;}
    .vii-story-item__thumbnail {max-width:100%;width:100%;}
    .vii-story-item__info {width:100%;padding-left:0;}
    .vii-story-item__description {margin-bottom:20px;}

    /* slider > avoid CLS */
    .vii-story-slider__items {
        min-height:calc(var(--item-width) * 442 / 660 + 16px + 39px + var(--vii-spacing-heading) + 24px * 4 + 46px);
    }

    /* hide arrow */
    .vii-story-slider__nav {display:none;}

    /* center text */
    .vii-story-slider__header {justify-content:center; text-align:center;}

    /* has 1 item */
    .vii-story-slider:not(:has(.vii-story-item:nth-child(2))) {
        --item-width:var(--vii-container);
    }
}
@media only screen and (max-width:480px) {
    .vii-story-slider {--item-width:calc(var(--vii-container) - var(--vii-gap-container));}
}