<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-180px * 58));
    }
}

.slider {
    background: white;
    /*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
    height: 280px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 95%;
}

    .slider::before,
    .slider::after {
        /*background: linear-gradient( to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100% );*/
        content: "";
        height: 280px;
        position: absolute;
        width: 180px;
        z-index: 2;
    }

    .slider::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider::before {
        left: 0;
        top: 0;
    }

    .slider .slide-track {
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(180px * 58);
    }

    .slider .slide {
        height: 280px;
        width: 180px;
        /*width: 280px;*/
    }

.slide {
    display: grid;
    place-content: center;
}



</pre></body></html>