@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    } 
}

.coment{
    /* border: 2px solid red; */
    overflow: hidden;
    padding: 20px 0;
    white-space: nowrap;
    position: relative;
    margin-bottom: 1%;
}

.coment::before,
.coment::after {
    /* border: 2px solid grey; */
    position: absolute;
    top: 0;
    width: 450px;
    height: 100%;
    content: "";
    z-index: 2;
}

.coment::before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), #EFEFEF);
}

.coment::after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #EFEFEF);
}

.coment:hover .coment-slide{
    animation-play-state: paused;
}

.coment-slide {
    /* border: 2px solid forestgreen; */
    display: inline-block;
    animation: 50s slide infinite linear;
}

.coment-slide img{
    width: 350px;
    margin: 0 40px;
}

@media only screen and (min-width:300px) and (max-width:780px){

.coment::before,
.coment::after {
    width: 100px;
}

.coment-slide img{
    width: 250px;
}

}

@media only screen and (min-width:781px) and (max-width:1300px){

    .coment::before,
    .coment::after {
        width: 150px;
    }
    
    .coment-slide img{
        width: 300px;
    }
    
    }