{{ define "main" }}
<section class="my-12 grid gap-6">
  {{ partial "partials/image/responsive-bg-pager.html" (dict
    "page" .Page
    "overlayStyles" "grid"
    "contentStyles" "text-xl sm:text-2xl text-center flex justify-center"
    "name" (lower (replace .Page.Title " " "-"))
    "dimensions" "min-h-[24rem]"
  ) }}

  <main class="grid grid-cols-4 gap-4">
    <article class="col-span-4 sm:col-span-4 box box-xl box-white border">
      {{ .Content }}
    </article>
  </main>

  <footer>
    {{/*  Comments section  */}}
    
    {{/*  Related Articles  */}}
    {{ $section := .Page.Section }}
    {{ $related := first 2 (where .Site.RegularPages "Section" $section) }}
    {{ partial "content/articles/collections/list.html" (dict "title" "Related Articles" "list" $related) }}
  </footer>
</section>
{{ end }}