The hero image should be 1920x700 pixels to provide the optimal responsive experience. A min-height: 500px is applied to the hero at the largest breakpoint but the sub-header grows and shrinks according the text contained within it.

<!--
   Output inline style for image for more granular control
   Preferably add to CSS but this depends on the implementation
-->
 <style>
     .health-sub-header--campaign {
         background-image: url('https://picsum.photos/id/867/1920/700') !important; // reqd to override .au-body--dark bg
     }
 </style>

 <div class="health-sub-header health-sub-header--campaign au-body au-body--dark">
     <div class="container">
         <div class="row">
             <div class="health-sub-header__content--secondary col-sm-7">
                 <h1>Campaign title</h1>
                 <p class="au-introduction">
                     Mauris quis lacinia neque. Nullam tellus sapien, fringilla pharetra ligula et, vulputate luctus erat. Sed ac nibh lacinia, porta justo ac, dignissim dolor.
                 </p>
                 <p>
                     <a class="au-btn au-btn--dark au-btn--large" href="#">
                         Callout button
                     </a>
                 </p>
             </div>
         </div>
     </div>
 </div>