.logo-ticker {
    position: relative;
    overflow: hidden;
    white-space: nowrap;

    --lt-gap: 40px;
    --lt-height: 40px;
    --lt-fade-dark: #0e1828;
    --lt-fade-light: #ffffff;
    --lt-fade-bg: var(--lt-fade-dark);
}

/* light theme via body.light-theme */
body.light-theme .logo-ticker {
    --lt-fade-bg: var(--lt-fade-light);
}

/* inner container */
.logo-ticker-inner {
    position: relative;
    overflow: hidden;
    height: var(--lt-height);
}

/* track container for seamless animation */
.logo-ticker-track {
    position: relative;
    height: var(--lt-height);
    will-change: transform;
}

/* logo item: positioned absolutely by JS */
.logo-item,
.logo-item-clone {
    position: absolute;
    top: 0;
    will-change: transform;
}

/* images */
.logo-item img,
.logo-item-clone img {
    height: var(--lt-height);
    width: auto;
    display: block;
    object-fit: contain;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.logo-item img:hover,
.logo-item-clone img:hover {
    opacity: 1;
}

/* fades */
.logo-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 10;
    pointer-events: none;
}

.logo-fade.fade-left {
    left: 0;
    background: linear-gradient(to right, var(--lt-fade-bg) 0%, transparent 100%);
}

.logo-fade.fade-right {
    right: 0;
    background: linear-gradient(to left, var(--lt-fade-bg) 0%, transparent 100%);
}

/* Seamless infinite scroll animations */
.logo-ticker-animate-left {
    animation: logoTickerScrollLeft var(--lt-animation-duration, 20s) linear infinite;
}

.logo-ticker-animate-right {
    animation: logoTickerScrollRight var(--lt-animation-duration, 20s) linear infinite;
}

@keyframes logoTickerScrollLeft {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-1 * var(--lt-translate-distance, 0px)), 0, 0);
    }
}

@keyframes logoTickerScrollRight {
    0% {
        transform: translate3d(calc(-1 * var(--lt-translate-distance, 0px)), 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 768px) {
    .logo-fade {
        width: 40px;
    }
}