<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 frontpage-claim-box">
            <div class="card-content">
              <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">
              <a href="#" class="card-footer-item">
                Mehr dazu <i class="fa-regular fa-circle-right"></i>
              </a>
            </footer>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>