.container{
    /* height: 100vh; */
    width: 100%;
    display: grid;
    place-content: center;
}

.slide{
    width: 90vw;
    max-height: 70vh;
    overflow: hidden;
    border-radius: 20px;
}

.slide ul{
    display: flex;
    padding: 0 ;
    width: 400%;

    animation: slide 30s infinite cubic-bezier(0.55, 0.48, 0.37, 0.92);
}

.slide img{
    width: 90vw;
    max-height: 70vh; 
    position: relative;
    object-fit: cover;
    border-radius: 20px;

}

@keyframes slide {
    0% {margin-left:  0%;}
    20% {margin-left:  0%;}

    25% {margin-left:  -100%;}
    45% {margin-left:  -200%;}

    50% {margin-left:  -200%;}
    70% {margin-left:  -200%;}

    75% {margin-left:  -300%;}
    100% {margin-left:  -300%;}
}




@media only screen and (max-width: 900px) {

    .slide{
        width: 90vw;
        max-height: 90vh;
        overflow: hidden;
        border-radius: 10px;
    }
    
    .slide img{
        width: 90vw;
        max-height: 90vh; 
        position: relative;
        object-fit: cover;
    }
}