---
layout: default
---
<div class="container py-5 mb-100" data-controller="pagefind">
  <div class="mb-3">
    {% render 'search_box_with_filters.html',
      url: page.url,
      categories: site.data.pagefind.categories,
      tags: site.data.pagefind.tags,
      sort: site.data.pagefind.sort
    %}
  </div>

  <section
    data-pagefind-target="container"
    class="row mx-auto row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-6 placeholder-glow"
  ></section>

  {% render 'sutty/placeholder.html', controller: 'pagefind' %}

  <section data-pagefind-target="empty" class="mx-auto" hidden>
    <h2>{{ page.empty }}</h2>
  </section>

  <section data-pagefind-target="searching" class="mx-auto" hidden>
    <h2>{{ page.searching }}</h2>
  </section>
</div>