@keyframes slides {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.logos {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    width: 45vw;
}

/* Media query for smaller screens */
@media screen and (max-width: 768px) {
    .logos {
        width: 90vw; /* Adjust width for smaller screens */
    }

    .logos li:first-child {
        margin-left: 0;
    }
}

.logos li {
    margin-bottom: 25px;
    margin-left: 15px;
    margin-right: 15px;
}

.logos li svg,
.logos li img {
    width: auto;
    height: 2.5rem;
}

.logos:before,
.logos:after {
    position: absolute;
    top: 0;
    content: '';
    /* width: 250px;
    height: 100%; */
    z-index: 2;
}

.logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

.logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

.logo_items {
    display: flex;
    flex-direction: row;
    animation: slides 25s linear infinite; /* Adjust duration as needed */
}

.logos:hover .logo_items {
    animation-play-state: paused;
}