/* MAIN */
main {
   height: 73.8vh;
   position: relative;
}
.lockers {
   background: url(../images/lockers_images/lockers_background.jpg) no-repeat;
   background-position: top;
   background-size: cover;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: flex-end;
   height: 100%;
}
.lockers::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.6);
   z-index: 1;
}
.lockers h1 {
   display: block;
   position: absolute;
   top: 50px;
   z-index: 2;
   color: #fff;
   text-transform: uppercase;
   font-size: 2em;
   text-shadow: 5px 5px 5px #ff53b4;
}
main .characters {
   display: flex;
   position: relative;
   height: 65%;
   justify-content: center;
   align-items: center;
   z-index: 2;
}
.characters a h2 {
   display: none;
}
.characters a:hover h2 {
   display: block;
}
main img {
   height: 200px;
}

main h2 {
   text-align: center;
   font-size: 1.5em;
}
.characters a {
   text-decoration: none;
   color: #fff;
   margin-left: 30px;
   transform: translateY(0px);
}
.characters a:hover {
   transform: translateY(-50px);
   cursor: pointer;
}
.line-after:after {
   background: url(../images/lockers_images/line.png) no-repeat;
   background-size: 100% 100%;
   content: "";
   height: 10px;
   left: 0;
   position: absolute;
   top: 73.8vh;
   width: 100%;
}


@media (max-width: 992px) {
   main img {
      height: 160px;
   }
   main .characters {
      height: 40%;
   }
}
@media (max-width: 700px) {
   .lockers {
      background: url(../images/lockers_images/lockers_background_mobile.jpg) no-repeat;
      background-position: top;
      background-size: cover;
      height: 100%;
      position: relative;
   }
   main img {
      height: 120px;
   }
   main .characters {
      height: 45%;
   }
}
@media (max-width: 576px) {
   main .characters{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-row-gap: 50px;
      justify-items: center;
   }
   .lockers {
      align-items: center;
      justify-content: center;
   }
   .lockers h1 {
      font-size: 1.5em;
   }
   .characters a {
      margin-left: 0;
   }
   .characters a h2 {
      display: block;
      font-size: 1em;
   }
}