/*********************************************
 * Image slider
**********************************************/
.twc-image-slider {
    --is-spacing-item:27px;
    --is-width-item:calc(350px + 2 * var(--is-spacing-item));
}
/* Content */
@media only screen and (min-width:769px) {
    .twc-image-slider__content {padding-right:var(--twc-gap-container);}
}

/* Slider */
.twc-image-slider__items-wrapper {margin:0 calc(-1 * var(--twc-gap-side)); overflow:hidden;}
.twc-image-slider__items {margin:0 calc(-1 * var(--is-spacing-item));}
.twc-image-slider__image {width:var(--is-width-item); padding:3px var(--is-spacing-item);}
.twc-image-slider__image-bg {aspect-ratio:35/29; display:block; overflow:hidden;}
.twc-image-slider__image-bg:before {
    background:#000; opacity:0; pointer-events:none; z-index:1;
    transition:var(--twc-transition);
}
.twc-image-slider__image-bg img {transition:var(--twc-transition);}
.twc-image-slider__image-bg:hover:before {opacity:.6;}
.twc-image-slider__image-bg:hover img {transform:scale(1.05);}

/* Hybrid layout */
.twc-image-slider__image:first-child, .twc-image-slider__image:last-child {width:calc(var(--is-width-item) + var(--twc-gap-side));}
.twc-image-slider__image:first-child {padding-left:calc(var(--is-spacing-item) + var(--twc-gap-side));}
.twc-image-slider__image:last-child {padding-right:calc(var(--is-spacing-item) + var(--twc-gap-side));}

/* Button arrow */
.twc-image-slider .flickity-button {
    --flkt-position:calc(var(--twc-gap-side) + var(--is-spacing-item));
}
.twc-image-slider .flickity-button:focus-visible {
    outline:2px solid var(--twc-color-secondary); border-radius:3px; transition:none;
}

/* avoid layout shift */
.twc-image-slider__items:not(.flickity-enabled) .twc-image-slider__image:not(:first-child) {display:none;}

/*********************************************
 * Image slider Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    .twc-image-slider {--is-spacing-item:10px;}

    /* Button arrow */
    .twc-image-slider .flickity-button {--flkt-position:var(--is-spacing-item);}
}
@media only screen and (max-width:768px) {
    .twc-image-slider {--is-width-item:calc(250px + 2 * var(--is-spacing-item));}
    .twc-image-slider__heading {flex-direction:column; text-align:center;}
    .twc-image-slider__content {margin-bottom:15px;}
}