<div class="np-custom-page-hero">
  <div class="np-max-width hero-wrapper">
    <div class="custom-page-hero-content">
      <h2 class="np-custom-page-headline">
        {{ custom_page.headline }}
      </h2>
      <div class="np-custom-page-subheadline">
        {{ custom_page.subheadline }}
      </div>
    </div>
    <div class="hero-graphic">
      <img src="https://s3.amazonaws.com/static.northpass.com/gainsight-university/certifications-hero-image.png" />
    </div>
  </div>
</div>

<style>
  .np-custom-page-hero {
    color: #153D5E;
    display: block;
    overflow: hidden;
    background-color: #fff;
    margin-top: 64px;
  }

  .custom-page-hero-content {
    text-align: center;
    padding: 50px 16px 24px;
  }

  .np-custom-page-hero .np-custom-page-headline {
    font-size: 32px;
    font-weight: 800;
    line-height: 32px;
    letter-spacing: -0.25px;
  }

  .np-custom-page-hero .np-custom-page-subheadline {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.25px;
    opacity: 1;
    margin-bottom: 20px;
  }

  .hero-graphic img {
    bottom: -4px;
    position: relative;
    padding: 0 16px;
    max-width: 100%;
  }

  @media (min-width: 768px) {
    .hero-wrapper {
      display: flex;
      align-items: center;
      height: 350px;
    }

    .custom-page-hero-content {
      width: 50%;
      padding: 16px;
      text-align: left;
    }

    .np-custom-page-hero .np-custom-page-headline {
      font-size: 28px;
    }

    .np-custom-page-hero .np-custom-page-subheadline {
      font-size: 16px;
      line-height: 20px;
    }

    .hero-graphic {
      width: 50%;
      height: 100%;
      position: relative;
    }

    .hero-graphic img {
      right: unset;
      left: 0;
      bottom: 0;
      width: auto;
      padding: 0;
      position: absolute;
    }
  }

  @media (min-width: 1024px) {
    .custom-page-hero-content,
    .hero-graphic {
      width: 50%;
    }

    .np-custom-page-hero .np-custom-page-headline {
      font-size: 40px;
    }

    .np-custom-page-hero .np-custom-page-subheadline {
      font-size: 20px;
      line-height: 26px;
    }
  }

  @media (min-width: 1200px) {
    .hero-wrapper {
      height: 400px;
    }

    .hero-graphic {
      display: flex;
      justify-content: end;
    }

    .hero-graphic img {
      position: relative;
    }
  }
</style>