<section
  class="hero is-fullheight-with-navbar has-teckids-orange-light-bg"
  id="frontpage-claim-block"
>
  <div class="hero-body">
    <div class="container">
      <p class="title is-1 has-text-centered">{{ config.description }}</p>
      <div class="columns is-same-height mt-4">
        {% for claim in section.extra.claims %}
        <div class="column is-one-third">
          <div class="card is-flex is-flex-direction-column is-fullheight is-justify-content-space-between frontpage-claim-box">
            <div class="card-content is-fullheight">
              <div class="columns is-vcentered">
                <div class="column">
                  <img src="/{{ claim.image }}" alt="image">
                </div>
                <div class="column is-four-fifths">
                  <h1 class="title is-3">{{ claim.title }}</h1>
                </div>
              </div>
              <p>{{ claim.content }}</p>
            </div>
            <footer class="card-footer">
              {% for link in claim.links %}
                <a href="{{ get_url(path=link.url) }}" class="card-footer-item">
                  <span class="icon-text">
                    <span>{{ link.title }}</span>
                    <span class="icon"><i class="fa-solid fa-arrow-right"></i></span>
                  </span>
                </a>
              {% endfor %}
            </footer>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>