<div class="page-header">
  <div class="page-header-content">
    <div class="np-resource-title">{{ page_headline }}</div>
    <div class="np-resource-subtitle">{{ page_subheadline }}</div>
  </div>
</div>

<style>
  .page-header {
    background:linear-gradient(120deg, rgba(0,104,103,0.75) 0%, rgba(0,141,86,0.75) 50%, rgba(10,163,74,0.75) 100%);
    text-align:center;
    padding:64px 24px;
  }

  .page-header-content {
    max-width:800px;
    margin:auto;
  }

  .page-header-content .np-resource-title,
  .page-header-content .np-resource-subtitle {
    color:#fff;
    text-align:center;
  }

  .page-header-content .np-resource-subtitle {
    margin-bottom:0;
  }

  @media (min-width:768px) {
    .page-header {
      padding:76px 24px;
    }

    .page-header-content .np-resource-title {
      font-size:36px;
      margin-bottom:24px;
    }
  }

</style>