{{ define "main" }}
  <header>
    {{ if .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="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
      <div class="min-w-0 min-h-0 max-w-prose">
        {{ .Content | emojify }}
      </div>
    </section>
  {{ end }}
  <section class="flex flex-wrap -mx-2 overflow-hidden">
    {{ range .Data.Terms }}
      <article class="w-full px-2 my-3 overflow-hidden 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 hover:underline decoration-primary-500 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 }}