{{ define "main" }}
  <header>
    {{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
      {{ partial "breadcrumbs.html" . }}
    {{ end }}
    <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
  </header>
  {{ if .Content }}
    <section class="prose mt-0 flex max-w-full flex-col dark:prose-invert lg:flex-row">
      <div class="min-h-0 min-w-0 max-w-prose grow">
        {{ .Content | emojify }}
      </div>
    </section>
  {{ end }}
  <section class="-mx-2 flex flex-wrap overflow-hidden">
    {{ range .Data.Terms }}
      <article class="my-3 w-full overflow-hidden px-2 sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
        <h2 class="flex items-center">
          <a
            class="text-xl font-medium decoration-primary-500 hover:underline hover:underline-offset-2"
            href="{{ .Page.RelPermalink }}"
            >{{ .Page.Title }}</a
          >
          {{ if $.Site.Params.taxonomy.showTermCount | default true }}
            <span class="px-2 text-base text-primary-500">&middot;</span>
            <span class="text-base text-neutral-400">
              {{ .Count }}
            </span>
          {{ end }}
        </h2>
      </article>
    {{ end }}
  </section>
{{ end }}