<div class="hero">
  <div class="np-max-width hero-content">
    <div class="row">
      <div class="col-xs-12 col-md-6">
        <h2 class="hero-title">Papa Pal University</h2>
      </div>
      <div class="col-xs-12 col-md-6">
        <div class="hero-imagery">
          <div class="hero-image top-image"><img src="https://s3.amazonaws.com/static.northpass.com/papa/hero-image-face-yellow.png" loading="lazy" /></div>
          <div class="hero-image left-image"><img src="https://s3.amazonaws.com/static.northpass.com/papa/hero-image-face-blue.png" loading="lazy" /></div>
          <div class="hero-image right-image"><img src="https://s3.amazonaws.com/static.northpass.com/papa/hero-image-face-green.png" loading="lazy" /></div>
        </div>
      </div>
    </div>
  </div>
</div>


<style>

  .hero {
    background-color: #06083c;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 120px 16px 64px;
    display: flex;
  }

  .hero:before {
    content: "";
    width: 90%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: url('https://s3.amazonaws.com/static.northpass.com/papa/hero-background-squiggle.png');
    transform: translate(9%, -16%);
    background-size: 109%;
    background-position: bottom left;
    background-repeat: no-repeat;
  }

  .hero-content {
    position: relative;
  }

  .hero .hero-title {
    font-size: 48px;
    line-height: 130%;
    font-weight: 900;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
  }

  .hero-imagery {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-imagery .hero-image {
    width: 50%;
    position: relative;
  }

  .hero-imagery .hero-image.top-image {
    width: 100%;
    text-align: center;
  }

  .hero-imagery .hero-image.left-image {
    top: -35px;
    left: 40px;
  }

  .hero-imagery .hero-image.right-image {
    right: 20px;
    top: 15px;
  }

  .hero-imagery img {
    max-width: 230px;
  }

  @media(min-width:768px) {

    .hero {
      min-height: 400px;
    }

    .hero:before {
      width: 75%;
    }

    .hero .hero-title {
      font-size: 72px;
    }
  }

  @media(min-width:1024px) {
    .hero {
      min-height: 500px;
    }

    .hero:before {
      background-size: 100%;
      transform: translate(0%, -16%);
    }

    .hero .hero-title {
      font-size: 90px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-imagery {
      display: flex;
    }
  }

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

    .hero .hero-title {
      font-size: 104px;
    }
  }
</style>
