{% assign homepage = site.data.homepage %}

<style>

.bg-hero {
  background: url('{{homepage.hero-banner}}') no-repeat top left;
  -webkit-background-size: cover;
  background-size: cover;
}

</style>

<section class=“bp-hero bg-hero”>

<div class="bp-hero-body">
    <div class="bp-container ">
        <div class="row is-vcentered">
            <div class="col is-8 is-offset-2 has-text-centered has-text-white">
                <h1 class="display padding--bottom--lg margin--none">
                    <b class="is-hidden-touch">{{ homepage.hero-title }}</b>
                    <b class="is-hidden-desktop">{{ homepage.hero-title }}</b>
                </h1>
                <h5 class="is-hidden-mobile padding--bottom--sm">
                  {{ homepage.hero-subtitle }}
                </h5>
            </div>
        </div>
    </div>
</div>

</section> <section id=“key-highlights” class=“bp-section is-paddingless”>

<div class="bp-container">
   <div class="row is-gapless has-text-centered">
      {% for key-highlight in homepage.key-highlights %}

      <div class="col">
        <a href="{{ key-highlight.url }}">
          <p class="has-text-weight-semibold has-text-white key-highlight-title is-uppercase">{{ key-highlight.title }}</p>
          <p class="has-text-white-trans">{{ key-highlight.description }}</p>
        </a>
      </div>

      {% endfor %}
   </div>
</div>

</section>