.dbtts {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    color: inherit;
    font-family: inherit;
    background: transparent;
}

.dbtts-viewport {
    width: 100%;
    min-height: var(--dbtts-height);
    overflow: hidden;
}

.dbtts-track {
    display: flex;
    width: max-content;
    min-width: 100%;
    color: inherit;
    will-change: transform;
    transform: translate3d(0,0,0);
}

.dbtts-track.is-running {
    animation-name: dbtts-scroll-left;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--dbtts-duration, 20s);
}

.dbtts[data-direction="right"] .dbtts-track.is-running {
    animation-name: dbtts-scroll-right;
}

.dbtts.is-paused .dbtts-track {
    animation-play-state: paused;
}

.dbtts-strip {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--dbtts-gap);
    min-height: var(--dbtts-height);
    padding-right: var(--dbtts-gap);
    color: inherit;
}

.dbtts-item {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: var(--dbtts-height);
    color: inherit;
    font-family: inherit;
    background: transparent;
}

.dbtts-item-text {
    padding-inline: .15em;
}

.dbtts-item-both {
    gap: clamp(.6rem, 1.4vw, 1.15rem);
}

.dbtts-image {
    display: block;
    width: auto;
    height: auto;
    max-width: min(42vw, 720px);
    max-height: var(--dbtts-image-height);
    object-fit: contain;
    border-radius: 0;
}

.dbtts-text {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    color: inherit;
    white-space: nowrap;
    line-height: 1.05;
}

.dbtts-text strong {
    display: block;
    font-size: clamp(1.35rem, 2.8vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: inherit;
}

.dbtts-text > span {
    display: block;
    margin-top: .22em;
    font-size: clamp(.82rem, 1.15vw, 1.1rem);
    color: inherit;
    opacity: .68;
}

.dbtts-separator {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: var(--dbtts-height);
    color: inherit;
    font-size: clamp(1.3rem, 2.2vw, 2.4rem);
    opacity: .45;
    white-space: nowrap;
}

.dbtts-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    color: inherit;
}

@keyframes dbtts-scroll-left {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(calc(-1 * var(--dbtts-distance, 0px)),0,0); }
}

@keyframes dbtts-scroll-right {
    from { transform: translate3d(calc(-1 * var(--dbtts-distance, 0px)),0,0); }
    to { transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
    .dbtts-track.is-running {
        animation: none !important;
        transform: none !important;
    }
    .dbtts-viewport {
        overflow-x: auto;
        scrollbar-width: thin;
    }
}

@media (max-width: 600px) {
    .dbtts-image {
        max-width: 64vw;
    }
    .dbtts-text strong {
        font-size: clamp(1.15rem, 7vw, 2rem);
    }
}