Hero pane pattern

<div class="occlss-hero-pane "
  style="background-image: url( https://dummyimage.com/1200x132/525252/ffffff.png );">
  <h1 class="occlss-hero-pane__heading occlss-hero-pane__heading--residents">Working for Oxfordshire County Council</h1>
  <div class="occlss-top-tasks-pane occlss-top-tasks-pane--">
    <div class="occlss-top-tasks-pane__wrapper">
      <div class="occlss-layout occlss-top-tasks-pane__layout">
        <div class="occlss-layout__col occlss-layout__col--md-4 occlss-top-tasks-pane__col">
          <div class="occlss-top-tasks-pane__content">
            <h2 class="occlss-top-tasks-pane__heading">Apply</h2>
            <ul class="occlss-summary-list occlss-summary-list--tasks-pane">
              <li class="occlss-summary-list__item">
                <a href="javascript:void(0);" class="occlss-summary-list__link ">Jobs</a>
              </li>
              <li class="occlss-summary-list__item">
                <a href="javascript:void(0);" class="occlss-summary-list__link ">Blue Badge</a>
              </li>
              <li class="occlss-summary-list__item">
                <a href="javascript:void(0);" class="occlss-summary-list__link ">Bus pass</a>
              </li>
              <li class="occlss-summary-list__item">
                <a href="javascript:void(0);" class="occlss-summary-list__link ">Resident parking permit</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="occlss-layout__col occlss-layout__col--md-4 occlss-top-tasks-pane__col">
          <div class="occlss-top-tasks-pane__content">
            <h2 class="occlss-top-tasks-pane__heading">Pay</h2>
            <ul class="occlss-summary-list occlss-summary-list--tasks-pane">
              <li class="occlss-summary-list__item">
                <a href="javascript:void(0);" class="occlss-summary-list__link ">Parking tickets</a>
              </li>
              <li class="occlss-summary-list__item">
                <a href="javascript:void(0);" class="occlss-summary-list__link ">Certificates</a>
              </li>
              <li class="occlss-summary-list__item">
                <a href="javascript:void(0);" class="occlss-summary-list__link ">Ceremonies</a>
              </li>
              <li class="occlss-summary-list__item">
                <a href="javascript:void(0);" class="occlss-summary-list__link ">Council Tax</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="occlss-layout__col occlss-layout__col--md-4 occlss-top-tasks-pane__col">
          <div class="occlss-top-tasks-pane__content">
            <h2 class="occlss-top-tasks-pane__heading">Report</h2>
            <ul class="occlss-summary-list occlss-summary-list--tasks-pane">
              <li class="occlss-summary-list__item">
                <a href="javascript:void(0);" class="occlss-summary-list__link ">Pothole</a>
              </li>
              <li class="occlss-summary-list__item">
                <a href="javascript:void(0);" class="occlss-summary-list__link ">Faulty street light</a>
              </li>
              <li class="occlss-summary-list__item">
                <a href="javascript:void(0);" class="occlss-summary-list__link ">Safeguarding concern</a>
              </li>
              <li class="occlss-summary-list__item">
                <a href="javascript:void(0);" class="occlss-summary-list__link ">Street problem</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>