{{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
<div class="flex author author-extra mt-4">
  {{ with .data.image }}
      {{ $authorImage := resources.Get . }}
      {{ if $authorImage }}
        {{ if not $disableImageOptimization }}
          {{ $authorImage = $authorImage.Fill "192x192" }}
        {{ end }}
        <img class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4" width="96" height="96"
          src="{{ $authorImage.RelPermalink }}" />
      {{ else }}
        {{ $authorImage := resources.GetRemote . }}
        {{ if not $disableImageOptimization }}
          {{ $authorImage = $authorImage.Fill "192x192" }}
        {{ end }}
        <img class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4" width="96" height="96"
          src="{{ $authorImage.RelPermalink }}" />
      {{ end }}
  {{ end }}
  <div class="place-self-center">
    {{ $link := .link}}
    {{ with .data.name | markdownify | emojify }}
    <div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">
      {{ i18n "author.byline_title" | markdownify | emojify }}
    </div>
    <a {{ if $link }} href="{{ $link }}" {{ end }} class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
      {{ . }}
    </a>
    {{ end }}
    {{ with .data.bio | markdownify | emojify }}
    <div class="text-sm text-neutral-700 dark:text-neutral-400">{{ . }}</div>
    {{ end }}
    <div class="text-2xl sm:text-lg">
      <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
        {{ range .data.social }}
        {{ range $name, $link := . }}
        <a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href="{{ $link }}" target="_blank"
          aria-label="{{ $name | title }}" rel="me noopener noreferrer"><span class="inline-block align-text-bottom">{{ partial "icon.html" $name }}</span></a>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </div>
</div>