Hero Split

  <div class="hero-split">
    <div class="hero-split__content">
      <div class="hero-split__content-inner">
        <div class="eyebrow">...</div>
        <h2>...</h2>
        <p>...</p>
        <div class="hero-split__extra-content">
          ...
        </div>
        <div class="hero-split__buttons button-group">
          <a href="..." class="button">...</a>
          <a href="..." class="button button--secondary">...</a>
        </div>
      </div>
    </div>
    <div class="hero-split__image" style="background-image: url('https://www.virtual-college.co.uk/-/media/virtual-college/pdfs/services/bespoke/9-screens-to-use.ashx?h=540&amp;la=en&amp;w=960&amp;hash=769B5932A01BBC9F3537135D765B2D0DB088C6C5')"></div>
  </div>
  

  <div class="hero-split hero-split--reverse">
    ...
  </div>
  

  <div class="hero-split hero-split--dark">...
  <div class="hero-split hero-split--light">...
  <div class="hero-split hero-split--warm-grey">...