{{- define "main" -}}

<!-- Category header -->
<header class="gutter-x pt-36 pb-16 border-b border-mist">
  <div class="max-w-4xl">
    <span class="label text-ash block mb-4">Category</span>
    <h1 class="font-display text-5xl md:text-7xl text-paper text-balance">{{ .Title }}</h1>
    <p class="text-ash label mt-5">{{ len .Pages }} {{ if eq (len .Pages) 1 }}editorial{{ else }}editorials{{ end }}</p>
  </div>
</header>

<!-- Posts grid -->
<section class="gutter-x py-16 md:py-24">
  {{- if .Paginator.Pages -}}
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-5 gap-y-12">
    {{- range .Paginator.Pages -}}
    {{- partial "post-card.html" . -}}
    {{- end -}}
  </div>
  {{- partial "pagination.html" . -}}
  {{- else -}}
  <p class="text-ash label text-center py-24">No posts in this category yet.</p>
  {{- end -}}
</section>

{{- end -}}