<header class="row align-items-center{{#if reverse}} flex-row-reverse{{/if}}" {{#if id}} id="{{id}}"{{/if}}>
  <div class="hero-title col text-center">
    <h1 class="lh-lg" style="font-size: 3rem">{{title}}</h1>
    <div class="fs-1 mx-5 text-muted">
      {{~description~}}
      {{~#if description_md~}}
        {{{markdown description_md}}}
      {{~/if~}}
    </div>
    {{#if link}}
      <a href="{{link}}" class="btn btn-primary mb-3 mt-2 text-wrap">{{default link_text "Go"}}</a>
    {{/if}}
  </div>
  {{#if image}}
    <img src="{{image}}" alt="{{title}}" class="hero-image img-fluid col-lg-6" />
  {{/if}}
  {{#if video}}
    <video src="{{video}}" alt="{{title}}" class="hero-image img-fluid col-lg-6"
      {{~#if loop}} loop{{/if~}}
      {{~#if muted}} muted{{/if~}}
      {{~#if nocontrols}} autoplay
      {{~else}} controls
        {{~#if autoplay}} autoplay{{/if~}}
      {{~/if~}}
      {{~#if poster}} preload="none" poster="{{poster}}"{{/if~}}>
    </video>
  {{/if}}
</header>

<hr />

<div class="row justify-content-center mt-2">
  {{~#each_row~}}
  <div class="col-lg-6 col-xxl-4 mb-4">
    <div class="card border-0 h-100">
      <div class="card-body text-center p-4 p-lg-5 pt-0 pt-lg-0">
        {{#if icon}}
        <div style="margin-top: -1.5rem;" class="badge bg-{{default color 'success'}} text-{{default color 'success'}}-fg fs-1 mb-4 p-2">
          {{~icon_img icon 30~}}
        </div>
        {{/if}}
        <h2>
          {{#if link}}
          <a href="{{link}}">
          {{/if}}
            {{title}}
          {{#if link}}
          </a>
          {{/if}}
        </h2>
        <div class="mb-0">
          {{~description~}}
          {{~#if description_md~}}
            {{{markdown description_md}}}
          {{~/if~}}
        </div>
      </div>
    </div>
  </div>
  {{~/each_row~}}
</div>
