.avatar {
  @extend %main-content;
}

.avatar__text {
  @extend %main-text;
  margin: 0;

  @media screen and (min-width: 768px) {
     margin: 40px 0;
   }
}

.avatar__title {
  padding: 0 20px;
}

.carousel {
  height: $medium-image * 2;
  perspective: 200px;

  @media screen and (min-width: 768px) {
     margin-bottom: 100px;
   }

  .carousel-item {
    width: $medium-image;
    top: -200px;

    @media screen and (min-width: 768px) {
       width: $medium-image + 100;
     }
  }

  .indicators {
    bottom: 90px;

    @media screen and (min-width: 768px) {
       bottom: -15px;
     }
  }
}

.avatar {
  @extend %main-content;

  & + .buttons {
    text-align: center;
    background-color: $dark-blue;
    padding: 10px 0;

    @media screen and (min-width: 768px) {
      width: 40%;
    }

    .button {
      background-color: $transparent;
    }
  }
}

.avatar__text {
  @extend %main-text;
  margin: 0;

  @media screen and (min-width: 768px) {
     margin: 40px 0;
   }
}

.avatar__title {
  padding: 0 20px;
}

.carousel {
  height: $medium-image * 2;
  perspective: 200px;

  @media screen and (min-width: 768px) {
     margin-bottom: 100px;
   }

  .carousel-item {
    width: $medium-image;
    top: -200px;

    @media screen and (min-width: 768px) {
       width: $medium-image + 100;
     }
  }

  .indicators {
    bottom: 90px;

    @media screen and (min-width: 768px) {
       bottom: -15px;
     }
  }
}

Add style to choose avatar btn
Add style to choose avatar btn

related #181
