{{- $c := site.Data.content -}}
<section class="hero" id="top" aria-label="Mara Quell">
    <div class="stage">
      <img src="{{ ($c.top.img_1_image | relURL) }}" width="1536" height="1024" alt fetchpriority="high">
      <p class="word w1" aria-hidden="true" data-w1>{{ $c.top.p_2 }}</p>
      <p class="word w2" aria-hidden="true" data-w2>{{ $c.top.p_3 }}</p>
      <h1 class="sr">{{ $c.top.h1_4 }}</h1>
      <nav class="hnav label" aria-label="Sections" data-hnav>
        <a href="#top" aria-current="page">{{ $c.top.a_5 }}</a>
        <a href="#work">{{ $c.top.a_6 }}</a>
        <a href="#practice">{{ $c.top.a_7 }}</a>
        <a href="#notes">{{ $c.top.a_8 }}</a>
        <a href="#contact">{{ $c.top.a_9 }}</a>
      </nav>
      <p class="copy">{{ $c.top.p_10 }}</p>
    </div>

    <div class="intro">
      <p class="big rv" data-lines>{{ $c.top.p_11 }}</p>
      <div class="cols">
        <p class="note small rv" data-lines>{{ $c.top.p_12 }}</p>
        <figure class="ph bl rv"><img src="{{ ($c.top.img_13_image | relURL) }}" width="800" height="1200" alt="{{ $c.top.img_13_alt }}" loading="lazy"><figcaption class="cap">{{ $c.top.figcaption_14 }}</figcaption></figure>
        <figure class="ph bl rv"><img src="{{ ($c.top.img_15_image | relURL) }}" width="800" height="1200" alt="{{ $c.top.img_15_alt }}" loading="lazy"><figcaption class="cap">{{ $c.top.figcaption_16 }}</figcaption></figure>
        <figure class="ph bl rv"><img src="{{ ($c.top.img_17_image | relURL) }}" width="800" height="1200" alt="{{ $c.top.img_17_alt }}" loading="lazy"><figcaption class="cap">{{ $c.top.figcaption_18 }}</figcaption></figure>
      </div>
    </div>
  </section>