{{ define "main" }}
    
    <article class="single-interview">

      <header class="mb-4 wompum-container wompum-container--wide-gap aspect-2/1 md:aspect-3/1">{{ partial "interview-wompum.html" . }}</header>

      <div class="flex md:flex-row flex-col gap-4 mt-4">
        <aside class="md:sticky md:top-24 md:h-screen p-4 font-iosevka">
          {{ $headshot := resources.GetMatch (printf "**/%s" (strings.TrimPrefix "/" .Params.headshot)) }}
          {{ if and .Params.headshot $headshot }}
          <div class="narrator__container -mt-24" data-text="{{ .Params.narrator }}">
            {{ partial "image.html" (dict 
              "resource" $headshot 
              "width" "192" 
              "class" "narrator__frame"
              "alt" (printf "Photo of %s" .Params.narrator)
            ) }}
          </div>
          {{ end }}
          <div class="md:block hidden">{{ partial "interview-metadata.html" . }}</div>
        </aside>
        <div class="prose-xl max-w-prose dark:prose-invert p-4 mx-auto">
          <p class="font-bold text-4xl interview-title interview-title--single">{{ partial "interview-title" . }}</p>
          <p class="text-2xl">{{ .Params.summary }}</p>
          <div class="wompum-container wompum-container--no-gap h-1">
            <div class="wompum-grid" data-text="{{ .Params.summary }}" data-columns="12" data-rows="1">
            </div>
          </div>
          {{ .Content }}
        </div>
        <aside class="md:hidden block p-8 mt-8 border-t border-gray-200">{{ partial "interview-metadata.html" . }}</aside>
      </div>
    </article>
    <aside class="max-w-screen-xl mx-auto">
      {{ partial "related-interviews" (dict "page" . "topics" .Params.topics "limit" 3) }}
    </aside>
    <div class="text-center my-12"><a href="/">Go Home</a></div>
{{ end }}