.partner-slider {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap);
}

.partner-slider .track {
    padding: .5rem var(--padding) 6.5rem;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    background-image: linear-gradient(transparent 40%, var(--light) 40%);
}

.partner-slider h2 {
    text-align: center;
    padding: 0 var(--padding);
}

.partner-slider ul {
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    width: max-content;
    max-width: max-content;
    gap: var(--gap);
    flex-wrap: nowrap;
    align-items: stretch;
    animation: partner var(--duration, 15s) linear 0s infinite normal both;
}

.partner-slider ul:hover,
.partner-slider ul:focus,
.partner-slider ul:focus-within {
    animation-play-state: paused;
}

.partner-slider ul li {
    background-color: var(--white);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 !important;
    overflow: hidden;
    flex-shrink: 0;
    width: calc(((100vw - var(--padding) * 2) - 11 * var(--gap)) / 12 * 4);
    min-width: 15rem;
}

.partner-slider img {
    object-fit: contain;
    display: block;
    width: 30rem;
    max-width: calc(100% - 6rem);
    max-height: 20rem;
    height: auto;
    margin: 3rem;
}

@keyframes partner {
    from {
        transform: translateX( calc(0px - var(--padding)) );
    }
    to {
        transform: translateX( calc((((100% + var(--gap)) / 3) * -1) - var(--padding)));
    }
}