{{include "header.html"}}
{{include "nav.html"}}

<main class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
  {{if .Single}}
  <section class="rounded-[2rem] border border-[var(--border)] bg-white p-6 md:p-10">
    {{if index .Single.Ext "banner_img"}}
    <img src="{{index .Single.Ext "banner_img"}}" alt="{{.Single.Name}}" class="mb-8 h-72 w-full rounded-3xl object-cover">
    {{end}}
    <div class="section-kicker">{{.Single.Name}}</div>
    <h1 class="mt-4 text-4xl font-semibold">{{.Single.Name}}</h1>
    {{if .Single.Description}}<p class="mt-4 text-lg leading-8 text-[var(--muted)]">{{.Single.Description}}</p>{{end}}
    <div class="prose mt-8 max-w-none prose-p:leading-8 prose-headings:font-semibold">
      {{.Single.Content|Str2Html}}
    </div>
  </section>
  {{end}}
</main>

{{include "footer.html"}}
{{include "js.html"}}