* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.marquee {
     /* overflow: hidden;  */
     background-color:lightgray;
}

.marquee-content {
    display: flex;
    /* animation-name: scrolling;
    animation-duration: 10s;
    animation-fill-mode:   linear infinite; 
    border: 1px whitesmoke dashed;
    */
    animation: scrolling 15s linear infinite;
}

.marquee-item {
    flex: 0 0 16vw;
    margin: 0 1vw;
}

.marquee-item img {
    display: block;
    /* width: 100%; */
    height: 3vw;
    resize: vertical;
}

.marquee:hover .marquee-content {
    animation-play-state: paused;
}


@keyframes scrolling {
    0% {transform: translateX(0);}
    100% {transform: translateX(-144vw);}
}