.ltsp-ticker-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    --ltsp-duration: 40s;
    --ltsp-gap: 32px;
    --ltsp-height: 48px;
    --ltsp-fade: 10%;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--ltsp-fade),
        #000 calc(100% - var(--ltsp-fade)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--ltsp-fade),
        #000 calc(100% - var(--ltsp-fade)),
        transparent 100%
    );
}

.ltsp-ticker {
    display: flex;
    width: max-content;
    min-width: 100%;
    align-items: stretch;
    will-change: transform;
    backface-visibility: hidden;
}

.ltsp-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    column-gap: var(--ltsp-gap);
    row-gap: var(--ltsp-gap);
    flex-shrink: 0;
    padding-inline-end: var(--ltsp-gap);
}

.ltsp-ticker {
    animation-duration: var(--ltsp-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.ltsp-direction-left {
    animation-name: ltsp-scroll-left;
}

.ltsp-direction-right {
    animation-name: ltsp-scroll-right;
}

.ltsp-pause-on-hover:hover .ltsp-ticker {
    animation-play-state: paused;
}

.ltsp-grow-on-hover .ltsp-ticker,
.ltsp-grow-on-hover .ltsp-track {
    overflow: visible;
}

/* Do not use padding-inline shorthand here — it overrides padding-inline-end and
   collapses the seam between the two tracks (looks like missing gap between logos). */
.ltsp-grow-on-hover .ltsp-track {
    padding-block: var(--ltsp-grow-pad, 4px);
    padding-inline-start: 4px;
    padding-inline-end: var(--ltsp-gap);
}

.ltsp-grow-on-hover .ltsp-item {
    position: relative;
    z-index: 0;
    overflow: visible;
    transform-origin: center center;
    transition: transform 0.2s ease-out;
}

.ltsp-grow-on-hover .ltsp-item:hover {
    z-index: 5;
    transform: scale(var(--ltsp-grow-scale, 1.03));
}

.ltsp-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}

.ltsp-image-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ltsp-height);
    width: 100%;
}

.ltsp-image {
    display: block;
    max-height: var(--ltsp-height);
    width: auto;
    height: auto;
    object-fit: contain;
}

.ltsp-name {
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

@keyframes ltsp-scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes ltsp-scroll-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}