.scrollable-images {
     position: relative;
     height: 550px;
 }

 .image,
 #mybtn {
     position: absolute;
 }

 .image {
     top: 0;
     left: 1px;
     object-fit: cover;
     height: 500px;
     width: 95%;
 }

 #before {
     z-index: 2;
     border-right: 2px solid #fff;
     clip-path: inset(0px 50% 0px 0px);
 }

 #after {
     z-index: 1;
     border-left: 2px solid #fff;
 }


 #mybtn {
     height: 35px;
     width: 35px;
     -webkit-border-radius: 50px;
     -moz-border-radius: 50px;
     border-radius: 50px;
     z-index: 40;
     cursor: grab;
     overflow: hidden;
     margin: auto;
     background-color: #fff;
     color: #000;
 }





 @media only screen and (max-width: 400px) {
     .scrollable-images {
         height: 350px;
     }

     .image {
         height: 300px;
     }

 }

 
 @media only screen and (max-width: 320px) {
    .scrollable-images {
        height: 300px;
    }

    .image {
        height: 250px;
    }

}