{{ define "main" }}
<article class="page-enter">
  <section class="section">
    <div class="container">
      <p class="section__label">Journal</p>
      <h1 class="section__title">Notes from the Studio</h1>
    </div>
  </section>
  <section class="section">
    <div class="container">
      <div class="grid-2">
        {{ range .Pages }}
          <a href="{{ .RelPermalink }}" class="journal-card">
            {{ with .Params.hero_image }}
              <div class="journal-card__image"><img src="{{ . }}" alt="{{ $.Title }}" loading="lazy"></div>
            {{ end }}
            <div class="journal-card__body">
              <p class="journal-card__date">{{ .Date.Format "January 2, 2006" }}</p>
              <h3 class="journal-card__title">{{ .Title }}</h3>
              {{ with .Params.summary }}
                <p class="journal-card__summary">{{ . }}</p>
              {{ end }}
            </div>
          </a>
        {{ end }}
      </div>
    </div>
  </section>
</article>
{{ end }}