{{ define "main" }}
  {{ $heroImage := .Resources.GetMatch "hero*" }}
  {{ if $heroImage }}
    {{ $img := $heroImage.Filter (slice images.AutoOrient (images.Process "fit 1920x1080")) }}
    <section class="hero">
      <div class="hero-bg" style="background-image: url({{ $img.RelPermalink }})"></div>
      <div class="hero-fg">
        <div class="hero-content">
          <div class="hero-vase-title" aria-label="{{ .Title }}">
            <img src="/vase-lina.svg"  class="vase-name"  alt="Lina">
            <img src="/vase-rings.svg" class="vase-rings" alt="">
            <img src="/vase-marlin.svg" class="vase-name" alt="Marlin">
          </div>
          {{ with .Params.tagline }}<p>{{ . }}</p>{{ end }}
          <div class="hero-scroll" aria-hidden="true">
            <span class="hero-scroll-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M6 9l6 6 6-6"/>
              </svg>
            </span>
          </div>
        </div>
      </div>
    </section>
  {{ else }}
    {{ partial "title.html" . }}
  {{ end }}

  {{ with .Content }}
  <section class="home-intro">
    <div class="prose">{{ . }}</div>
  </section>
  {{ end }}

  {{ partial "categories.html" }}
  {{ partial "featured.html" . }}

  <div class="home-ornament" aria-hidden="true">
    <img src="/vase-image.svg" alt="" width="263" height="295">
  </div>

  {{ with .Params.albums_label }}
  <div class="home-divider"><span>{{ . }}</span></div>
  {{ end }}

  <section class="galleries">
    {{ range where .Pages "Params.private" "ne" true }}
      {{ partial "album-card.html" . }}
    {{ end }}
  </section>

  <div class="home-closing" aria-label="{{ .Params.closing }}">
    <img src="/vase-date.svg" class="vase-date" alt="{{ .Params.closing }}" width="263" height="47">
  </div>
{{ end }}