{{ define "main" }}
{{ partial "breadcrumbs.html" . }}

<div class="site-container section">
  <header class="mb-8 max-w-3xl">
    <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">{{ .Params.h1 | default .Title }}</h1>
    {{ with .Params.description }}<p class="mt-3 text-lg text-secondary/70">{{ . }}</p>{{ end }}
  </header>

  {{ with .Content }}<div class="prose-content max-w-3xl">{{ . }}</div>{{ end }}

  {{ with .Pages }}
    <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {{- range . -}}
        <a href="{{ .RelPermalink }}" class="card card-hover block no-underline">
          <h2 class="text-lg font-bold">{{ .LinkTitle }}</h2>
          <p class="mt-2 text-sm text-secondary/70">{{ .Params.description | default (.Summary | plainify) | truncate 120 }}</p>
        </a>
      {{- end -}}
    </div>
  {{ end }}
</div>

{{ partial "related-pages.html" . }}
{{ end }}