{{- $image := .Page.Resources.GetMatch .Destination -}}
{{- if $image -}}
{{ $tiny := $image.Resize "500x webp q80" }}
{{ $small := $image.Resize "800x webp q80" }}
{{ $medium := $image.Resize "1200x webp q80" }}
{{ $large := $image.Resize "1500x webp q80" }}

{{ $classes := ""}}
{{ if gt $image.Height $image.Width }}
 {{ $classes = "mx-12 md:mx-32"}}
{{ else }}
 {{ $classes = "mx-4 md:mx-12"}}
{{ end }}

<div class="flex justify-center {{ print $classes }}">
  <a href="{{- $image.RelPermalink -}}">

    <picture>
      <source media="(max-width: 376px)" 
          srcset="{{ $tiny.RelPermalink }}">
      <source media="(max-width: 992px)" 
          srcset="{{ $small.RelPermalink }}">
      <source media="(max-width: 1400px)" 
          srcset="{{ $medium.RelPermalink }}">
      <source media="(min-width: 1401px)" 
          srcset="{{ $large.RelPermalink }}">
      <img 
        alt="{{ .Text }}" src="{{ $image.RelPermalink }}" 
        height="{{ $image.Height}}" width="{{ $image.Width }}">
    </picture>
  </a>
</div>
{{- end -}}