<head>
  {{{style}}} {{{script}}}
</head>
<body class="preview-body">
  <section class="hero u-relative">
    <div class="background">
      {{#if properties.backgroundVideo}}
      <video playsinline="" autoplay="" muted="" loop="">
        <source src="{{properties.backgroundVideo}}" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      {{/if}} {{#if properties.backgroundImage}}
      <picture>
        <source srcset="{{properties.backgroundImage}}" />
        <img src="{{properties.backgroundImage.src}}" alt="{{properties.backgroundImage.alt}}" />
      </picture>
      {{/if}}
    </div>
    <div class="hero-inner">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-12 col-lg-6 pe-lg-5">
            <div class="hero-content">
              <nav class="hero-breadcrumb" aria-label="breadcrumb">
                <ul class="breadcrumb">
                  {{#each properties.breadcrumb}}
                  {{this.metadata}}
                  <li class="breadcrumb-item{{#if this.active }} active{{/if}}">
                    <a href="{{this.url}}" aria-label="{{ this.label }}" {{#if this.rel}} rel="{{this.rel}}" {{/if}}{{#if this.active }} aria-current="page"{{/if}}>
                      {{ this.label }}
                    </a>
                  </li>
                  {{/each}}
                </ul>
              </nav>
              <h1 class="hero-title h2">{{ properties.title_prefix}} <br><span>{{ properties.title }}</span></h1>
              <p class="hero-lead">{{ properties.paragraph }}</p>
              
              <div class="hero-cta mt-lg-2">
                {{#if properties.primary}}
                <div>
                  {{properties.primary.metadata}}
                  <a href="{{ properties.primary.url }}" target="_self" class="btn btn-primary" aria-label="{{ properties.primary.label }}">
                    <span class="link-icon link-icon-arrow">
                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"><path fill="#0D1116" d="M.285 12.877a.4.4 0 0 1-.001-.567L10.593 1.994h-8.49a.4.4 0 0 1-.4-.4V.4c0-.22.18-.4.4-.4H14v11.899a.4.4 0 0 1-.396.4l-1.193.012a.4.4 0 0 1-.404-.4V3.4L1.697 13.717a.4.4 0 0 1-.565 0l-.847-.841Z"/></svg>
                    </span>
                    {{ properties.primary.label }}
                  </a>
                </div>
                {{/if}}
                {{#if properties.secondary}}
                <div>
                  <a href="{{ properties.secondary.url }}" target="_blank" class="btn btn-outline" aria-label="{{ properties.secondary.label }}">
                    <span class="link-icon link-icon-arrow">
                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"><path fill="#0D1116" d="M.285 12.877a.4.4 0 0 1-.001-.567L10.593 1.994h-8.49a.4.4 0 0 1-.4-.4V.4c0-.22.18-.4.4-.4H14v11.899a.4.4 0 0 1-.396.4l-1.193.012a.4.4 0 0 1-.404-.4V3.4L1.697 13.717a.4.4 0 0 1-.565 0l-.847-.841Z"/></svg>
                    </span>
                    {{ properties.secondary.label }}
                  </a>
                </div>
                {{/if}}
              </div>
            </div>
          </div>
          {{#if properties.image}}
          <div class="col-12 col-lg-6 ps-lg-5">
            <div class="hero-media">
              <img width="670" class="mw-lg-none" src="{{ properties.image.src }}" alt="{{ properties.image.alt }}" />
            </div>
          </div>
          {{/if}}
        </div>
      </div>
    </div>
  </section>
</body>
