Page Title - Onboarding

<div class="page-title-onboarding">
    <div class="page-title-onboarding__inner">
        <img src="/images/page-title-onboarding.jpg" alt="" class="img-responsive page-title-onboarding__media" />
        <h1 class="page-title-onboarding__title">Welcome Aboard, Riley!</h1>
        <div class="page-title-onboarding__intro">We’re so happy you’ve joined us! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
</div>

.page-title-onboarding {
  background-color: $color-base-blue;
  color: $color-base-white;

  .page-title-onboarding__inner {
    position: relative;
    z-index: 1;
    max-width: 1170px;
    margin: 0 auto;

    @media (min-width: $breakpoint-desktop) {
      min-height: 308px;
      background: url("/images/page-title-onboarding.jpg") no-repeat center;

      &::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to right, $color-base-blue, transparent 50%);
      }
    }
  }

  .page-title-onboarding__media {
    margin-bottom: 1.6rem;

    @media (min-width: $breakpoint-desktop) {
      display: none;
    }
  }

  .page-title-onboarding__title {
    @include typeDisplay(true);
    position: relative;
    text-transform: uppercase;
    padding: 0 1.6rem;
    margin: 0 0 1.6rem;

    @media (min-width: $breakpoint-desktop) {
      @include typeDisplayLarge(true);
      width: 50%;
      padding-top: 2.4rem;
      margin-bottom: 2.4rem;
    }
  }

  .page-title-onboarding__intro {
    @include typeCaption(true);
    position: relative;
    padding: 0 1.6rem 1.6rem;

    @media (min-width: $breakpoint-desktop) {
      @include typeBody(true);
      width: 33.3333%;
      margin-bottom: 2.4rem;
    }
  }
}