.otp-logo-marquee {
    display: grid;
    gap: 20px;
}

.otp-logo-row {
    width: 100%;
    overflow: hidden;
}

.otp-logo-track,
.otp-logo-set {
    display: flex;
    width: max-content;
}

.otp-logo-track {
    will-change: transform;
}

.otp-logo-row--2 .otp-logo-track {
    transform: translateX(-50%);
}

.otp-logo-set {
    flex: 0 0 auto;
    gap: 17px;
    padding-right: 17px;
}

.otp-logo-card {
    position: relative;
    display: grid;
    width: 180px;
    height: 100px;
    flex: 0 0 180px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 16px;
    color: #a3a3a3;
    text-decoration: none !important;
}

.otp-featured--version-2 .otp-logo-card {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.otp-featured--version-2 .otp-logo-card:hover,
.otp-featured--version-2 .otp-logo-card:focus-visible {
    border-color: rgba(0, 0, 0, 0.16);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.otp-logo-slot {
    /* position: absolute;
    inset: 50% auto auto 50%; */
    display: block;
    /*! width: 160px; */
    /*! height: 65px; */
    /*! transform: translate(-50%, -50%); */
}

.otp-logo-image {
    /* position: absolute; */
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    transition: filter 180ms ease, opacity 180ms ease;
}

.otp-logo-card:not(.otp-logo-card--has-color) .otp-logo-image--default {
    filter: grayscale(1);
    opacity: 0.6;
}

.otp-logo-card--has-color .otp-logo-image--default {
    opacity: 0.5;
}

.otp-logo-card--has-color .otp-logo-image--color {
    opacity: 0;
    display: none;
}

.otp-logo-card:not(.otp-logo-card--has-color):hover .otp-logo-image--default,
.otp-logo-card:not(.otp-logo-card--has-color):focus-visible .otp-logo-image--default {
    filter: none;
    opacity: 1;
    display: block;

}

.otp-logo-card--has-color:hover .otp-logo-image--default,
.otp-logo-card--has-color:focus-visible .otp-logo-image--default {
    opacity: 0;
    display: none;

}

.otp-logo-card--has-color:hover .otp-logo-image--color,
.otp-logo-card--has-color:focus-visible .otp-logo-image--color {
    opacity: 1;
    display: block;

}

@media (max-width: 767px) {

    .otp-logo-marquee {
        gap: 14px;
    }

    .otp-logo-set {
        gap: 12px;
        padding-right: 12px;
    }

    .otp-logo-card {
        width: 180px;
        height: 80px;
        flex-basis: 180px;
        padding: 12px;
    }

    .otp-logo-card:not(.otp-logo-card--has-color) .otp-logo-slot {
        width: 132px;
        height: 52px;
    }

    .otp-logo-card--has-color .otp-logo-slot {
        transform: translate(-50%, -50%) scale(0.8);
    }

}

@media (prefers-reduced-motion: reduce) {
    .otp-logo-track {
        animation: none;
        transition: none;
    }

}