<div class="hero">
        <div class="hero__img">
          <img src="http://images.vfl.ru/ii/1568893523/c9258e21/27915042.jpg
" alt="">
        </div>
        <div class="hero__container">
          <div class="hero__description container">
            <h1 class="hero__title">Become an outstanding List</h1>
            <h3 class="hero__subtitle">Through one of our training programs at MSCoL</h3>
            <a href="/" class="hero__button">Join the team</a>
          </div>
        </div>
      </div>

// .hero {
//   position: relative;

//   &__img {

//     img {
//       width: 100%;
//     }
//   }
  
//   &__container {
//     position: absolute;
//   }

 
//    &__description {

//     @include make-container();
//     @include make-container-max-widths();

//     @include media-breakpoint-up(md) {
//       display: flex;
//       justify-content: flex-end;
//       align-items: flex-start;
//       flex-direction: column;
//     }
//   }

//   &__title,
//   &__subtitle {
//     color: $primary;
//   }

//   &__title {
//     font-size: 18px;
//     padding-top: 100px;

//     @include media-breakpoint-up(xs) {
//       max-width: 194px;
//     }

//     @include media-breakpoint-up(md) {
//       margin-bottom: 1.25rem;
//       font-size: 2.5rem;
//       max-width: 600px;
//     }  
//   }
//   &__subtitle {
//     font-size: 1rem;
//     line-height: 1.8rem;
//     max-width: 100%;

//     @include media-breakpoint-up(md) {
//       font-size: 1.2rem;
//       max-width: 300px;
//     }
//   }

//   &__button {
//     display: block;
//     width: 100%;
//     text-align: center;
//     color: #fff;
//     padding: 20px;
//     background-color: $selected;
//     border-radius: 4px;
//     transition: transform .5s;
  
//     @include media-breakpoint-up(md){
//       max-width: 170px;
//       margin-top: 50px;

//       &:hover {
//         color: #fff;
//         transform: scale(1.1);
//       }
//     }
//   }
// }


.hero__button {
    display: block;
    max-width: 170px;
    margin-top: 50px;
    text-align: center;
    color: #fff;
    padding: 20px;
    background-color: red;
    border-radius: 4px;
    transition: transform .5s;
}

.hero__button:hover {
  color: #fff;
  transform: scale(1.1);
  }