Landing Page Title

<!-- Tall Version, Default Background -->
<div class="page-title-landing">
    <div class="page-title-landing__inner" style="background-image: url(/images/page-title-landing-tall-default.png)">
        <img src="/images/page-title-landing-tall-default.png" alt="" class="img-responsive page-title-landing__media hidden-lg" />
        <h1 class="page-title-landing__title">Page Title (Tall Version, Default)</h1>
        <div class="page-title-landing__intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque hic, iure corporis magnam eum modi vero omnis odio quod aperiam!</div>
    </div>
</div>

<!-- Tall Version, Custom Image -->
<div class="page-title-landing">
    <div class="page-title-landing__inner" style="background-image: url(https://via.placeholder.com/1170x308)">
        <img src="https://via.placeholder.com/1170x308" alt="" class="img-responsive page-title-landing__media hidden-lg" />
        <h1 class="page-title-landing__title">Page Title (Tall Version)</h1>
        <div class="page-title-landing__intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque hic, iure corporis magnam eum modi vero omnis odio quod aperiam!</div>
    </div>
</div>

<!-- Short Version, Default Background -->
<div class="page-title-landing page-title-landing--short">
    <div class="page-title-landing__inner" style="background-image: url(/images/page-title-landing-short-default.png)">
        <img src="/images/page-title-landing-short-default.png" alt="" class="img-responsive page-title-landing__media hidden-lg" />
        <h1 class="page-title-landing__title">Page Title (Short Version, Default)</h1>
    </div>
</div>

<!-- Short Version, Custom Image -->
<div class="page-title-landing page-title-landing--short">
    <div class="page-title-landing__inner" style="background-image: url(https://via.placeholder.com/1170x180)">
        <img src="https://via.placeholder.com/1170x180" alt="" class="img-responsive page-title-landing__media hidden-lg" />
        <h1 class="page-title-landing__title">Page Title (Short Version)</h1>
    </div>
</div>

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

  .page-title-landing__inner {
    position: relative;
    z-index: 1;
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-position: bottom right;
    background-repeat: no-repeat;

    @media (max-width: $breakpoint-desktop - 1) {
      background-image: none !important; // Override inline at this breakpoint
    }

    @media (min-width: $breakpoint-desktop) {
      min-height: 30.8rem;

      &::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 66.6667%);
      }
    }
  }

  &.page-title-landing--short .page-title-landing__inner {
    @media (min-width: $breakpoint-desktop) {
      min-height: 18rem;
    }
  }

  .page-title-landing__media {
    margin-bottom: 1.6rem;
  }

  .page-title-landing__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: 66.6667%;
      padding-top: 2.4rem;
      margin-bottom: 2.4rem;
    }
  }

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

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