/****************************
 * Image Carousel
****************************/
.ifs-image-carousel {
    --ic-height:460px;
    --ic-ratio:1;
    --ic-spacing-item:16px;
    position:relative;
}
.ifs-image-carousel:before {
    content:""; display:block; z-index:0;
    width:var(--ifs-100vw); height:100%; background:var(--ifs-color-neutral-100);
    position:absolute; top:0; left:calc(-1 * var(--ifs-gap-side));
}
.ifs-image-carousel__inner {position:relative; z-index:1;}

/* heading */
.ifs-image-carousel__heading-text {padding-right:20px;}

/* slider */
.ifs-image-carousel__items-wrapper {
    margin-left:calc(-1 * var(--ifs-gap-side)); margin-right:calc(-1 * var(--ifs-gap-side));
    overflow:hidden;
}
.ifs-image-carousel__items {margin:0 calc(-1 * var(--ic-spacing-item) / 2);}

/* item */
.ifs-image-carousel__item {width:calc(var(--ic-height) * var(--ic-ratio)); padding:0 calc(var(--ic-spacing-item) / 2);}
.ifs-image-carousel__item:first-child {
    padding-left:calc(var(--ifs-gap-side) + var(--ic-spacing-item) / 2);
    width:calc(var(--ic-height) * var(--ic-ratio) + var(--ifs-gap-side) + var(--ic-spacing-item) / 2);
}
.ifs-image-carousel__item-image {height:var(--ic-height); margin-bottom:6px; position:relative;}
.ifs-image-carousel__item-image-bg {height:100%; border-radius:10px;}

/* hover */
.ifs-image-carousel__item-image[data-custom-fancybox]:not(:hover):before {opacity:0;}
.ifs-image-carousel__item-image[data-custom-fancybox]:before {
    background:#000; transition:var(--ifs-transition); opacity:.2; z-index:2;
}

/* caption */
.ifs-image-carousel__item-caption {line-height:1.6; font-weight:600; letter-spacing:.5px;}
.ifs-image-carousel__item-caption-text {padding-left:15px;}

/* arrow */
.ifs-image-carousel__nav .flickity-button {position:relative; top:auto; left:auto; right:auto; transform:none;}
.ifs-image-carousel__nav .flickity-button:not(:last-child) {margin-right:10px;}


/****************************
 * Image Carousel Responsive
****************************/
@media only screen and (max-width:1180px) {
    .ifs-image-carousel {--ic-height:400px;}
}
@media only screen and (max-width:1024px) {
    .ifs-image-carousel {--ic-height:350px; --ic-spacing-item:20px;}
}
@media only screen and (max-width:768px) {
    /*hide button*/
    .ifs-image-carousel__nav {display:none;}

    /*heading*/
    .ifs-image-carousel__heading-text {padding-right:0;}
}
@media only screen and (max-width:480px) {
    .ifs-image-carousel {--ic-height:250px; --ic-spacing-item:10px;}
}
@media only screen and (max-width:375px) {
    .ifs-image-carousel {--ic-height:200px;}
}