.spl-carousel {
    --spl-gap: 48px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    container-type: inline-size;
}

.spl-carousel *,
.spl-carousel *::before,
.spl-carousel *::after {
    box-sizing: border-box;
}

.spl-carousel__viewport {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.spl-carousel__track {
    display: flex;
    align-items: center;
    gap: var(--spl-gap);
    width: max-content;
    animation: spl-scroll var(--spl-duration, 32s) linear infinite;
}

.spl-carousel__group {
    display: flex;
    align-items: center;
    gap: var(--spl-gap);
}

.spl-carousel__item,
.spl-carousel__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
}

.spl-carousel__item img {
    display: block;
    width: auto;
    max-width: 180px;
    height: 48px;
    object-fit: contain;
}

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

@keyframes spl-scroll {
    to {
        transform: translate3d(calc(-50% - var(--spl-gap) / 2), 0, 0);
    }
}

@container (max-width: 720px) {
    .spl-carousel {
        --spl-gap: 28px;
    }

    .spl-carousel__item,
    .spl-carousel__link,
    .spl-carousel__item img {
        height: 36px;
    }

    .spl-carousel__item img {
        max-width: 140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spl-carousel__track {
        width: 100%;
        overflow-x: auto;
        animation: none;
    }

    .spl-carousel__group[aria-hidden="true"] {
        display: none;
    }
}