<section class="section superhaufen">
  <div class="container">
    <div class="content text-justify">
      {{ .Content }}
    </div>
  </div>
  <div class="container">
    {{ partial "filter-controls" . }}
    <div class="filter-container row justify-content-center">
      {{ range .Params.tiles }}
        {{ partial "modal" . }}
        <div class="col-lg-4 col-sm-6 filter-item" data-groups="{{ .category | urlize }}">
          <div class="card border-primary rounded-0 hover-shadow mb-2">
            {{ if and .image (ne .image "/media/image.webp") }}
              <img class="card-img-top rounded-0" src="{{ .image | relURL }}">
            {{ else }}
              <div class="container fb-tile-color" style="background-color:{{ .bg_color }};">
                <span class="fb-tile-icon" style="color: {{ .font_color }}">{{ partial "mdi" .icon }}</span>
              </div>
            {{ end }}
            <div class="card-body d-flex flex-column">
              <h4 class="card-title text-truncate">{{ .title }}</h4>
              {{ if .external.enable }}
                <a href="{{ .external.link | absURL }}" class="btn btn-primary btn-sm mt-auto align-self-start">Mehr anzeigen</a>
              {{ else }}
                <button type="button" class="btn btn-primary btn-sm mt-auto align-self-start" onclick="$('#{{ md5 .title }}').modal('show');" data-pagefind-ignore>Mehr anzeigen</button>
              {{ end }}
            </div>
          </div>
        </div>
      {{ end }}
    </div>
    <div class="filter-sizer col-1"></div>
  </div>
</section>