Page Title

<div class="page-title">
    <h1 class="page-title__title">
        <span class="page-title__title-text">PAGE TITLE</span>
    </h1>

    <!-- Optional Intro Text -->
    <div class="page-title__intro">
        <div class="page-title__intro-text">
            <div class="page-title__intro-text-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate ex vitae mauris tincidunt, ac imperdiet massa gravida. Phasellus venenatis accumsan urna quis venenatis.</div>
        </div>
    </div>
    <!-- /Optional Intro Text -->
</div>

<!-- Light Version -->
<div class="page-title page-title--light">
    <h1 class="page-title__title">
        <span class="page-title__title-text">PAGE TITLE</span>
    </h1>

    <!-- Optional Intro Text -->
    <div class="page-title__intro">
        <div class="page-title__intro-text">
            <div class="page-title__intro-text-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate ex vitae mauris tincidunt, ac imperdiet massa gravida. Phasellus venenatis accumsan urna quis venenatis.</div>
        </div>
    </div>
    <!-- /Optional Intro Text -->
</div>

.page-title {
  margin-bottom: 2.4rem;
}

.page-title__title {
  @include typeDisplay(true);
  color: $color-base-white;
  background-color: $color-blue-dark;
  padding: 0.8rem 1.2rem;
  margin: 0;

  @media (min-width: $breakpoint-desktop) {
    @include typeDisplayLarge(true);
    padding: 0.8rem;
  }

  .page-title--light & {
    color: $color-blue-medium;
    background-color: transparent;

    @media (min-width: $breakpoint-desktop) {
      @include typeDisplayMedium(true);
    }
  }
}

.page-title__title-text {
  display: block;
  max-width: 1140px;
  margin: 0 auto;
}

.page-title__intro {
  @include typeBody;
  color: $color-base-white;
  padding: 1.6rem;
  background-color: $color-base-blue;

  .page-title--light & {
    padding-top: 0;
    padding-bottom: 0;
    color: $color-base-blue;
    background-color: transparent;
  }
}

.page-title__intro-text {
  max-width: 1140px;
  margin: 0 auto;
}

.page-title__intro-text-container {
  @media (min-width: $breakpoint-desktop) {
    width: 50%;
  }
}