{{#extend "layout"}}

  {{#content "bodyAttributes"}}class="page-index"{{/content}}
  {{#content "body"}}

  <div class="card-grid" style="grid-auto-rows: unset;">

    {{#each posts.all}}
      <a class="titlecard-preview {{#each classes}}{{this}} {{/each}}" data-id="{{id}}">
        <span>{{originalpath}}</span>
        <img src="/images/filler.png" data-src="{{rev this.titlecard}}" alt="" defer>
      </a>
    {{/each}}

  </div>

  {{/content}}

  {{#append 'postscripts'}}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.9.0/lozad.min.js"></script>
  <script>
    window.lozad('img[data-src]', {
      rootMargin: '50% 0px', // syntax similar to that of CSS Margin
      threshold: 0.5, // ratio of element convergence
    }).observe(); // lazy loads elements with default selector as '.lozad'
  </script>
  {{/append}}

{{/extend}}