.container{
    display: flex;
    left: 0;
    margin: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 20px;
    width: 100%;
    height: auto;
    margin-bottom: 100px;
    text-align: center;
    background: rgb(20, 20, 20);
}

.container::-webkit-scrollbar{
    height:8px;
    
}

.container::-webkit-scrollbar-thumb{
    background: rgb(69, 69, 69);
    border-radius:5px;
}

.container::-webkit-scrollbar-thumb:hover{
    background:rgb(184, 184, 184);
    cursor: pointer;
}

.container  .item{
    flex: 0 0 20px;
    border-radius: 8px;
    scroll-snap-align: start;
    padding: 5px;
    width: 100%;
}

.item img{
    width: 400px;
    height: 712px;
    object-fit: cover;
    border-radius: 10px;
}


/*************************************************/


@media screen and (max-width:800px){
    .item img{
        width: 320px;
        height: 570px;
    }

}

@media screen and (max-width:500px){
    .item img{
        width: 320px;
        height: 570px;
    }
    .container{
        padding-left: 5px;
    }
}