<div class="np-homepage-hero">
  <img class="np-homepage-hero-image"
    src="https://s3.amazonaws.com/static.northpass.com/Christie's+The+Academy/Photos/catalog-hero.png"
    alt="My Dashboard"
  />
  <div class="np-homepage-hero-content">
    <div class="np-homepage-headline np-header-font-color">
      My Dashboard
    </div>
    <div class="np-homepage-subheadline np-header-font-color">
      Great courses from the comfort of your home or office
    </div>
  </div>
</div>

<style>
  .np-homepage-hero .np-homepage-hero-image {
    max-height: 70vh;
  }
  .np-homepage-headline {
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem;
    font-weight: 500;
  }
  .np-homepage-subheadline {
    font-weight: 400;
    font-size: 1.5rem;
    opacity: 1;
    margin-top: 30px;
  }
  .hero-button {
    background: none;
    color: white !important;
    border: 1px solid white;
    border-radius: 0;
    padding: 17px;
    height: 50px;
    margin-top: 70px;
  }
  .hero-button:hover {
    background: rgba(255,255,255,0.6);
    color: black !important;
  }
  @media screen and (max-width: 1000px) {
    .np-homepage-headline {
      font-size: 4rem;
    }
    .np-homepage-subheadline {
      margin-top: 15px;
    }
    .hero-button {
      margin-top: 30px;
    }
  }
  @media screen and (max-width: 768px) {
    .featured-courses-title {
      text-align: center;
    }
    .np-homepage-hero-image {
      height: auto;
      min-height: 360px;
    }
    .np-homepage-hero-content {
      
    }
    .np-homepage-headline {
      font-size: 3rem;
      line-height: 3.5rem;
    }
  }
  @media screen and (max-width: 460px) {
    .np-homepage-hero-content {
      transform: translate(0, 30px);
    }
  }
</style>