.banner {
  position: relative;
  background-image: url(../../dist/images/banner_bg_2.jpg);
  background-size: contain;
  height: 750px;
  padding: 120px ;
  color: $cream;
  margin-top: 100px;

  @include breakpoint (medium down) {
    background-size: cover;
  }

  .decor {
    position: absolute;
    background-image: url(../../dist/images/booble_bg.png);
    background-position: left bottom;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    bottom: -6px;
  }

  .content {
    position: relative;
    z-index: +1;
  }

  @include breakpoint (large only) {

  }

  @include breakpoint (medium down) {
    padding: 20px;
    margin: 0;
    text-align: center;
  }

  @include breakpoint (small down) {
    margin: 0px 0 10px 0;
  }

  .characters {
    position: absolute;
    z-index: +3;
    bottom: -80;
    width: 100%;
    height: auto;

    @include breakpoint (medium down) {
      position: relative;
    }
  }

  h1 {
    padding-top: 40px;
    font-size: 150px;
    font-weight: 800;
    line-height: 140px;
    text-shadow: 1px 1px 1px $black;

    &::after {
      display: none;
    }

    @include breakpoint (medium down) {
      padding: 120px 0 0;
      font-size: 80px;
    }

    span {
      font-size: 60px;
      text-shadow: 1px 1px 1px $black;
      line-height: 60px;
      margin-bottom: 30px;


      @include breakpoint (medium down) {
        line-height: 0;
        font-size: 34px;
      }
    }
  }

  p {
    margin-top: 50px;
    font-family: $header-font-family;
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
  }

  .button {
    margin-top: 50px;

    @include breakpoint (medium down) {
      margin-top: 10px;
    }
  }


  h1, h2, p {
    color: $cream;


    span {
      display: block;
    }
  }
}
