@keyframes autoSlide {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

#patrons {
    h1 {
        width: fit-content;
        font-size: 2rem;
        font-weight: 400;
        border-bottom: 1px solid #f8931e;
        padding: 5px 20px;
        margin: 0 auto 50px;
    }
    .patron-logos {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 2rem;
        width: max-content;
        animation: autoSlide 60s linear infinite;

        .logo {
            width: 250px;
            height: 250px;
            display: block;
            align-content: center;

            img {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    #patrons {
        .patron-logos {
            .logo {
                width: 100px;
                height: 100px;
            }
        }
    }
}

@media screen and (max-width: 400px) {
    #patrons {
        .patron-logos {
            .logo {
                width: 70px;
                height: 70px;
            }
        }
    }
}