html {
  /*  scroll-behavior: smooth;
    overflow-x: scroll;*/
}


.wrapper {
    display: grid;
    grid-template-columns: repeat(150, 100%);
    overflow: hidden;
    scroll-behavior: smooth;
    
}
 
    .wrapper section {
        width: 100%;
        position: relative;
        display: grid;
        grid-template-columns: repeat(5, auto);
        /*margin: 20px 0;*/
        padding-left: 50px;
        padding-right: 50px;
    }


        .wrapper section .item {
            /*  padding: 0 2px;*/
            padding: 10px; 
            transition: 250ms all; 
        }

            .wrapper section .item:hover {
              
            }

        .wrapper section a {
            position: absolute;
            color: dimgray;
            text-decoration: none;
            font-size: 5em;
            /*background: black;*/
            
            text-align: center;
            z-index: 1;
        }

            .wrapper section a:nth-of-type(1) {
                top: 0;
                bottom: 0;
                left: 0;
                padding-top: 55px;
                /*background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, black 100%);*/
            }

            .wrapper section a:nth-of-type(2) {
                top: 0;
                bottom: 0;
                right: 0;
                padding-top: 55px;
                /*background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, black 100%);*/
                overflow: hidden;
            }

@media only screen and (max-width: 600px) {
    a.arrow__btn {
        display: none; 
    }
    .wrapper section {        
        display: contents!important;        
    }
    .wrapper { 
        overflow: scroll!important;
    }
}