html {
 scroll-behavior: smooth;
}
body {
 margin: 0;
 background-color: black;
}
h2 {
 font-family: Arial;
 color: white;
 text-align: left;
}
h1 {
 font-family: Arial;
 color: red;
 text-align: center;
}
.w {
 display: grid;
 grid-template-columns: repeat(3, 100%);
 overflow: hidden;
 scroll-behavior: smooth;
}
.w section {
 width: 100%;
 position: relative;
 display: grid;
 grid-template-columns: repeat(5, auto);
 margin: 20px 0;
}
.w section .item {
 padding: 0 2px;
 transition: 250ms all;
}
.w section .item:hover {
 margin: 0 40px;
 transform: scale(1.2);
}
.w section a {
 position: absolute;
 color: #fff;
 text-decoration: none;
 font-size: 6em;
 background: black;
 width: 80px;
 padding: 20px;
 text-align: center;
 z-index: 1;
}
.w section a:nth-of-type(1) {
 top: 0;
 bottom: 0;
 left: 0;
 background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, black 100%);
}
.w section a:nth-of-type(2) {
 top: 0;
 bottom: 0;
 right: 0;
 background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, black 100%);
}
@media only screen and (max-width: 600px) {
 a.arrow {
 display: none;
 }
}