.body{
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
#    background-color: red;
}

#container {
    width: 1200px;
    max-width: 100%;
    overflow: hidden;
    height: 720px;
#    border: 1px solid red;
#    background-color: gray;
}
    
.slider {
    display:inline-block;
    white-space: nowrap; 
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /*	iOS 9 */
    -webkit-scroll-snap-points-x: repeat(101%);
    -webkit-scroll-snap-type: mandatory;
}
    
.slider img {
    -webkit-scroll-snap-align: center;
    scroll-snap-align: center;
    max-width:100%; height:auto;
    vertical-align:bottom;
    margin:0 6px 3px 0;
    outline: none !important;
#    width: 1200px;
#    height: 710px;
}
    
.slider img:last-of-type {
    margin:0 0 3px 0;
}


#container:focus-within {
    outline: 2px dotted #555;
}



    /*	Scrollbar always visible (not Firefox) */
    .slider::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 6px;
	height:12px;
    }
    .slider::-webkit-scrollbar-thumb {
	border-radius: 12px;
	background-color: #aaa;
    }
    .slider::-webkit-scrollbar-corner {
	background-color:transparent;
    }