.az-customer-image-slider {
    --az-customer-visible: 4;
    --az-customer-gap: 16px;
    --az-customer-duration: 34s;
    --az-customer-animation-duration: var(--az-customer-duration);
    --az-customer-distance: 0px;
    --az-customer-distance-negative: calc(var(--az-customer-distance) * -1);
    --az-customer-slide-width: calc((100% - (var(--az-customer-gap) * (var(--az-customer-visible) - 1))) / var(--az-customer-visible));
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.az-customer-image-slider *,
.az-customer-image-slider *::before,
.az-customer-image-slider *::after {
    box-sizing: inherit;
}

.az-customer-image-slider__viewport {
    width: 100%;
    overflow: hidden;
}

.az-customer-image-slider__track {
    display: flex;
    gap: var(--az-customer-gap);
    width: max-content;
    will-change: transform;
    animation: az-customer-image-slider-loop var(--az-customer-animation-duration) linear infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.az-customer-image-slider:not([data-az-customer-image-slider-ready="true"]) .az-customer-image-slider__track {
    animation: none;
}

.az-customer-image-slider.is-reversed .az-customer-image-slider__track {
    animation-direction: reverse;
}

.az-customer-image-slider.can-pause:hover .az-customer-image-slider__track {
    animation-play-state: paused;
}

.az-customer-image-slider__group {
    display: flex;
    flex: 0 0 auto;
    gap: var(--az-customer-gap);
    width: max-content;
}

.az-customer-image-slider__slide {
    flex: 0 0 var(--az-customer-slide-width);
    min-width: 0;
}

.az-customer-image-slider__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f5f0ea;
    color: inherit;
    text-decoration: none;
}

.az-customer-image-slider__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.az-customer-image-slider--empty {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #c7b8a6;
    border-radius: 8px;
    color: #6a5847;
    font-size: 14px;
}

@keyframes az-customer-image-slider-loop {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(var(--az-customer-distance-negative), 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .az-customer-image-slider__track {
        animation: none;
        transform: none;
    }
}