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

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

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

/* item */
.vii-image-carousel__item {width:calc(var(--ic-height) * var(--ic-ratio)); padding:0 calc(var(--ic-spacing-item) / 2);}
.vii-image-carousel__item-inner {display:block;}
.vii-image-carousel__item:first-child {
    padding-left:calc(var(--vii-gap-side) + var(--ic-spacing-item) / 2);
    width:calc(var(--ic-height) * var(--ic-ratio) + var(--vii-gap-side) + var(--ic-spacing-item) / 2);
}
.vii-image-carousel__item-image {height:var(--ic-height); margin-bottom:6px;}
.vii-image-carousel__item-image-bg {height:100%;}

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


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

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