/***********************************
* Logo Carousel
***********************************/
.vii-logo-carousel {
    --logo-w:168px;
    --logo-h:calc(var(--logo-w) * 78 / 168);
    --logo-gap: 12px;

    --number-logos: 10;
    --logo-move:0;
    --speed-move: 0.04;
}

/* layer blue */
.vii-logo-carousel:before, .vii-logo-carousel:after {
    content:"";
    width:clamp(100px, 25.76vw, 371px); height:112%; background: linear-gradient(to right, #fff 0%, rgba(238, 241, 245, 0) 100%);
    position:absolute; top:50%; transform:translateY(-50%); z-index:2; pointer-events:none;
}
.vii-logo-carousel:before {left:0;}
.vii-logo-carousel::after {right:0; transform:scaleX(-1) translateY(-50%)}
.vii-bg-tertiary .vii-logo-carousel:before,
.vii-bg-tertiary .vii-logo-carousel:after {
    background: linear-gradient(to right, var(--vii-color-tertiary) 0%, rgba(238, 241, 245, 0) 100%);
}

/* row */
.vii-logo-carousel__row {height:var(--logo-h)}
.vii-logo-carousel__row:not(:last-child) {margin-bottom:var(--logo-gap);}
.vii-logo-carousel__row-inner {
    width:calc(var(--number-logos) * var(--logo-w) + var(--logo-gap) * (var(--number-logos) - 1));
    gap:var(--logo-gap);
}
.vii-logo-carousel__row:nth-child(odd) .vii-logo-carousel__row-inner {
    transform:translateX(calc(-50% - var(--logo-move) * 100% * var(--speed-move)));
}
.vii-logo-carousel__row:nth-child(even) .vii-logo-carousel__row-inner {
    transform:translateX(calc(-50% + var(--logo-move) * 100% * var(--speed-move)));
}

/* logo item */
.vii-logo-carousel__item {width:var(--logo-w); height:var(--logo-h); padding:16px;}

/* VC Row has bg */
.vc_row.vc_row-has-fill .vii-logo-carousel__item {background:#fff;}


/***********************************
* Logo Carousel - Responsive
***********************************/
@media only screen and (max-width:480px) {
    .vii-logo-carousel {
        --logo-w:140px;
        --logo-gap: 8px;
        --speed-move: 0.1;
    }
    .vii-logo-carousel__item {padding:12px;}
}