/* Carrusel personalizado de logos de clientes */

.vr-logo-carousel {
    --vr-logo-gap: 34px;
    --vr-logo-slide-width: 164px;
    --vr-logo-height: 82px;
    --vr-logo-fade-size: 9%;

    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.vr-logo-carousel__viewport {
    width: 100%;
    overflow: hidden;
    padding: 18px 0;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--vr-logo-fade-size),
        #000 calc(100% - var(--vr-logo-fade-size)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--vr-logo-fade-size),
        #000 calc(100% - var(--vr-logo-fade-size)),
        transparent 100%
    );
}

.vr-logo-carousel__track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
}

.vr-logo-carousel__slide {
    display: flex;
    flex: 0 0 var(--vr-logo-slide-width);
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: var(--vr-logo-height);
    margin-right: var(--vr-logo-gap);
}

.vr-logo-carousel__slide img {
    display: block;
    max-width: min(140px, 100%);
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* filter: grayscale(100%); */
    /* opacity: 0.62; */
    transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.vr-logo-carousel__slide img:hover,
.vr-logo-carousel__slide img:focus-visible {
    /* filter: grayscale(0%); */
    opacity: 1;
    transform: translateY(-1px);
}

.vr-logo-carousel:hover .vr-logo-carousel__track,
.vr-logo-carousel:focus-within .vr-logo-carousel__track {
    animation-play-state: paused;
}

.vr-logo-carousel--static .vr-logo-carousel__track {
    justify-content: center;
    width: 100%;
    animation: none;
}

@keyframes vr-logo-carousel-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(var(--vr-carousel-distance, 0px) * -1), 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vr-logo-carousel__track {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 768px) {
    .vr-logo-carousel {
        --vr-logo-gap: 24px;
        --vr-logo-slide-width: 132px;
        --vr-logo-height: 68px;
        --vr-logo-fade-size: 12%;
    }

    .vr-logo-carousel__slide img {
        max-width: 112px;
        max-height: 58px;
    }
}

@media (max-width: 480px) {
    .vr-logo-carousel {
        --vr-logo-gap: 18px;
        --vr-logo-slide-width: 104px;
        --vr-logo-height: 58px;
        --vr-logo-fade-size: 15%;
    }

    .vr-logo-carousel__viewport {
        padding: 14px 0;
    }

    .vr-logo-carousel__slide img {
        max-width: 88px;
        max-height: 48px;
    }
}