$itemGrow: 1.2;
$duration: 250ms;

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #000;
}

.vermelho h1 {
  font-family: Arial;
  color: red;
  text-align: center;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3,100%);
  overflow:hidden;
  scroll-behavior: smooth;

  section {
    width: 100%;
    position: relative;
    margin: 20px 0;

    .item {
      padding: 0 2px;
      transition: $duration all;

      &:hover {
        margin: 0 30px;
        transform: scale(1.2);
        transform: 6;
      }

    }
    
    a {
      /* position: absolute; */
      color: #fff;
      text-decoration: none;
      font-size: 6em;
      
      text-align: center;
      z-index: 1;

    }

    &>a:first-child {
      position: absolute;
        left:0;
        
      }
      &>a:last-child {
        position: absolute;
        right: 0;
       
      }
  }
}

// Remove the arrow for Mobile
@media only screen and (max-width: 600px) {
  a.arrow__btn {
    display:none;
  }
}