.image-marquee-section {
    width: 100%;
    --image-marquee-height: 220px;
    --image-marquee-gap: 32px;
    --image-marquee-distance: 0px;
    --image-marquee-duration: 20s;
}

.image-marquee-section .image-marquee__viewport {
    width: 100%;
    overflow: hidden;
}

.image-marquee-section .image-marquee__track {
    display: flex;
    width: max-content;
    min-width: 100%;
    gap: 0;
    will-change: transform;
    animation: image-marquee-scroll var(--image-marquee-duration) linear infinite;
}

.image-marquee-section .image-marquee__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--image-marquee-gap);
    padding-inline-end: var(--image-marquee-gap);
}

.image-marquee-section .image-marquee__item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.image-marquee-section .image-marquee__image {
    display: block;
    width: auto;
    height: var(--image-marquee-height);
    max-width: none;
}

.image-marquee-section .image-marquee__image--contain {
    object-fit: contain;
}

.image-marquee-section .image-marquee__image--cover {
    object-fit: cover;
}

.image-marquee-section.image-marquee--reverse .image-marquee__track {
    animation-direction: reverse;
}

.image-marquee-section.image-marquee--pause-on-hover .image-marquee__track:hover {
    animation-play-state: paused;
}

.image-marquee-section[data-image-marquee-ready="false"] .image-marquee__track {
    animation-play-state: paused;
    opacity: 0;
}

.image-marquee-section[data-image-marquee-ready="true"] .image-marquee__track {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.image-marquee-section[data-image-marquee-reduced-motion="true"] .image-marquee__track {
    animation: none;
    transform: none;
}

@keyframes image-marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-1 * var(--image-marquee-distance)), 0, 0);
    }
}

@media (max-width: 1023px) {
    .image-marquee-section {
        --image-marquee-gap: 24px;
    }
}

@media (max-width: 767px) {
    .image-marquee-section {
        --image-marquee-height: 160px;
        --image-marquee-gap: 20px;
    }
}