{{ define "main" }}
  {{ partial "scrolling-image-header" . }}
  <section class="container-fluid list-main">
    <div class="container px-5">
      {{ block "content" . }}
        {{ .Content }}
      {{ end }}
    </div>

    <div class="row" data-masonry='{"percentPosition": true}'>
      {{ range .Pages }}
        <div class="col-xl-auto mb-4">
          <div class="card">
            <div class="card-body">
              {{/* Thumbnail images should be stored as 'thumbnail'.* in the page bundle, but
                historically they might have been referenced as 'thumbnail' in the front
                matter, or (even more historically) as 'cardImage'. Use scratch to
                normalize all these different systems.
              */}}
              {{ $bundleGlob := "thumbnail.*" }}
              {{ $frontThumbGlob := print "images/" (.Params.thumbnail) ".*" }}
              {{ $frontCardGlob := print "images/" (.Params.cardImage) ".jpg" }}
              {{ $allThumbnailGlob := print "{" $frontThumbGlob "," $frontCardGlob "," $bundleGlob "}" }}
              {{ with .Resources.GetMatch $allThumbnailGlob }}
                {{ $thumbnail := . }}
                {{ $thumbnailResized := $thumbnail.Resize "600x" }}
                <img
                  class="img img-thumbnail float-start me-3 md-max-width-33"
                  src="{{ $thumbnailResized.RelPermalink }}"
                  alt="Thumbnail of {{ .Title }}"
                />
              {{ end }}
              <a href="{{ .RelPermalink }}"
                ><h3 class="card-title">{{ .Title }}</h3></a
              >
              <p class="card-text">
                {{ .Summary }}
                <strong
                  ><small
                    ><a href="{{ .RelPermalink }}">Read more &raquo;</a></small
                  ></strong
                >
              </p>
            </div>
          </div>
          <!-- </card> -->
        </div>
        <!-- </col> -->
      {{ end }}
    </div>
    <!-- </row> -->
  </section>
{{ end }}