Hero - Homepage (light)

<figure class="mp c-hero c-hero--homepage-light">
  <div class="u-wrap">
    <div class="c-hero__content">
      <header class="u-flow--m">
        <h1 class="c-h c-h--page-title">We’re big on small.</h1>
        <p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>
      </header>
      <div class="c-hero__button-wrap">
        <button type="button" class="mp c-button c-button--inline" >About Malvern Panalytical</button>
      </div>
    </div>
  </div>
  <div class="c-hero__image-bg" style="background-image:url(/static/img/homepage_1_back.webp);"></div>
  <div class="c-hero__image-bg" style="background-image:url(/static/img/homepage_2_back.webp);"></div>
  <canvas class="c-hero__canvas"></canvas>
  <div class="c-hero__image-fg" style="background-image:url(/static/img/homepage_1_front_full.webp);"></div>
  <div class="c-hero__image-fg" style="background-image:url(/static/img/homepage_2_front_full.webp);"></div>
</figure>

{
  "title": "We’re big on small.",
  "subtitle": null,
  "content": "<p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>",
  "images": [
    {
      "src": "/static/img/homepage_1_back.webp"
    },
    {
      "src": "/static/img/homepage_2_back.webp"
    }
  ],
  "frontimages": [
    {
      "src": "/static/img/homepage_1_front_full.webp"
    },
    {
      "src": "/static/img/homepage_2_front_full.webp"
    }
  ],
  "cta": {
    "label": "About Malvern Panalytical",
    "link": ""
  },
  "homepage": "light"
}