{{ define "main" }}
<section class="my-12 grid gap-6">
  <header class="grid gap-4 text-center">
    <h1 class="text-4xl font-mono font-bold">{{ .Title }}</h1>

    <nav class="box box-sm opacity-65">
      <ul id="breadcrumbs" class="flex justify-center gap-2">
        {{- range .Ancestors.Reverse }}
        <li class="btn-link"><a href="{{ .Permalink }}">{{ .Title }}</a></li> <span>/</span>
        {{- end }}
        <li class="font-thin">{{ .Title }}</li>
      </ul>
    </nav>

    {{ if .Description }}
    <p class="text-xl text-gray-600">{{ .Description }}</p>
    {{ end }}

    {{ .Content }}
  </header>

  <div class="grid sm:grid-cols-3 gap-4">
  {{ $categories := .Pages }}
  {{ range $categories }}
    {{ partial "image/responsive-bg.html" (dict
      "name" (replace .Title " " "")
      "src" .Params.background
      "page" .
      "styles" "box-pop"
      "overlayStyles" ""
      "opacity" "0.75"
      "cta" "See All"
      "ctaStyles" "text-xl"
      "url" .Permalink
    ) }}
  {{ end }}
  </div>
</section>
{{ end }}