.dht-ticker {
    --dht-duration: 20s;
    --dht-gap: 48px;
    --dht-vpad: 0.3em;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.dht-ticker__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: var(--dht-vpad);
    padding-bottom: var(--dht-vpad);
    box-sizing: border-box;
}

.dht-ticker__track {
    display: inline-flex;
    align-items: center;
    min-width: max-content;
    white-space: nowrap;
    will-change: transform;
    animation: dht-scroll-left var(--dht-duration) linear infinite;
}

.dht-ticker__group {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.dht-ticker__item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: var(--dht-gap);
    padding-top: 0.05em;
    padding-bottom: 0.05em;
    box-sizing: border-box;
}

.dht-ticker:not(.dht-ticker--no-pause):hover .dht-ticker__track,
.dht-ticker:not(.dht-ticker--no-pause):focus-within .dht-ticker__track {
    animation-play-state: paused;
}

@keyframes dht-scroll-left {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dht-ticker__track {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transform: translate3d(0, 0, 0);
    }
}