.logo-ticker-carousel {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    overflow: hidden;
    padding: 28px 0;
    background: #ffffff;
    box-sizing: border-box;
    isolation: isolate;
}

/*
 * Gradient fade on the left and right edges.
 */
.logo-ticker-carousel::before,
.logo-ticker-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}

.logo-ticker-carousel::before {
    left: 0;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
    );
}

.logo-ticker-carousel::after {
    right: 0;
    background: linear-gradient(
        270deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
    );
}

/*
 * Moving track containing two identical logo sets.
 */
.logo-ticker-carousel .ltc-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation-name: ltc-scroll;
    animation-duration: var(--ltc-speed, 45s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

/*
 * Reverse movement.
 */
.logo-ticker-carousel.ltc-reverse .ltc-track {
    animation-direction: reverse;
}

/*
 * Pause movement on hover.
 */
.logo-ticker-carousel.ltc-pause:hover .ltc-track {
    animation-play-state: paused;
}

/*
 * Each complete set of logos.
 */
.logo-ticker-carousel .ltc-set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--ltc-gap, 64px);
    padding-right: var(--ltc-gap, 64px);
}

/*
 * Individual logo item.
 */
.logo-ticker-carousel .ltc-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 1px;
}

/*
 * Logo image.
 */
.logo-ticker-carousel .ltc-logo {
    display: block;
    width: auto;
    height: var(--ltc-height, 56px);
    max-width: 80px;
    object-fit: contain;
    object-position: center;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s ease, 
        opacity 0.35s ease;
}

/*
 * Simple logo hover effect.
 */
.logo-ticker-carousel .ltc-item:hover .ltc-logo {
    transform: scale(1.08);
}

/*
 * Optional grayscale setting.
 */
.logo-ticker-carousel.ltc-grayscale .ltc-logo {
    filter: grayscale(1);
    opacity: 0.75;
}

.logo-ticker-carousel.ltc-grayscale .ltc-item:hover .ltc-logo {
    filter: grayscale(0);
    opacity: 1;
}

/*
 * The track contains two identical sets.
 * Moving by 50% moves exactly one complete set.
 */
@keyframes ltc-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/*
 * Tablet.
 */
@media screen and (max-width: 991px) {
    .logo-ticker-carousel {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .logo-ticker-carousel::before,
    .logo-ticker-carousel::after {
        width: 50px;
    }

    .logo-ticker-carousel .ltc-set {
        gap: calc(var(--ltc-gap, 64px) * 0.7);
        padding-right: calc(var(--ltc-gap, 64px) * 0.7);
    }

    .logo-ticker-carousel .ltc-logo {
        height: calc(var(--ltc-height, 56px) * 0.82);
        max-width: 170px;
    }
}

/*
 * Mobile.
 */
@media screen and (max-width: 575px) {
    .logo-ticker-carousel {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .logo-ticker-carousel::before,
    .logo-ticker-carousel::after {
        width: 30px;
    }

    .logo-ticker-carousel .ltc-set {
        gap: calc(var(--ltc-gap, 64px) * 0.5);
        padding-right: calc(var(--ltc-gap, 64px) * 0.5);
    }

    .logo-ticker-carousel .ltc-logo {
        height: calc(var(--ltc-height, 56px) * 0.65);
        max-width: 140px;
    }
}

/*
 * Accessibility: disable continuous animation when the
 * visitor has reduced-motion enabled.
 */
@media (prefers-reduced-motion: reduce) {
    .logo-ticker-carousel {
        width: 100%;
        max-width: 100%;
        left: auto;
        margin-left: 0;
    }

    .logo-ticker-carousel .ltc-track {
        width: 100%;
        animation: none;
    }

    .logo-ticker-carousel .ltc-set {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 25px;
        padding-right: 0;
    }

    .logo-ticker-carousel .ltc-set[aria-hidden="true"] {
        display: none;
    }
}