<div
  class="p-4 min-h-[40.27px] flex flex-col sm:flex-row w-full justify-between bg-black"
>
  {{ with site.GetPage "_index.md" }}

  <a class="justify-center flex mb-2 sm:mb-0" aria-label="Back to home" href="/"
    ><img
      class="w-44 h-[40.2667px]"
      alt="{{ .Params.logoAlt }}"
      src="{{ .Params.logo }}"
      loading="lazy"
  /></a>
  <nav
    class="place-self-center h-8 flex justify-end gap-4 text-white pr-0 sm:pr-6"
  >
    {{ range .Site.Menus.main }}
    <a
      style="white-space: nowrap"
      class="underline underline-offset-0 decoration-2 decoration-transparent hover:decoration-white hover:underline-offset-2 ease-in-out duration-300 place-self-center"
      href="{{ .URL }}"
      aria-label="{{ .Identifier }}"
    >
      {{ $text := print .Name | safeHTML }} {{ $text }}
    </a>
    {{ end }}
  </nav>
  {{ end }}
</div>