{{- $c := site.Data.content -}}
<section class="sec story" id="top" aria-label="One house, from the keys back to the first drawing">
    <div class="screen grid-on on-photo">
      <div class="backdrop stage" aria-hidden="true">
        <img src="{{ ($c.top.img_1_image | relURL) }}" alt data-layer>
        <img src="{{ ($c.top.img_2_image | relURL) }}" alt data-layer>
        <img src="{{ ($c.top.img_3_image | relURL) }}" alt data-layer>
        <img src="{{ ($c.top.img_4_image | relURL) }}" alt data-layer>
        <i class="wipe" data-wipe></i>
        <svg class="dims" data-dims />
      </div>
      <div class="gridlay" data-gridlay aria-hidden="true"></div>
      <h1 class="hl" data-k="hl"><span>{{ $c.top.span_5 }}</span><span>{{ $c.top.span_6 }}</span></h1>
      <div class="b panel counter" data-k="counter"><span class="mono">{{ $c.top.span_7 }}</span><span data-time>{{ $c.top.span_8 }}</span></div>
      <div class="b panel cap" data-k="cap">
        <div class="cap-in" data-cap aria-live="polite">
          <p class="label"><b>{{ $c.top.b_9 }}</b><span>{{ $c.top.span_10 }}</span></p>
          <h2>{{ $c.top.h2_11 }}</h2>
          <p>{{ $c.top.p_12 }}</p>
        </div>
      </div>
      <button class="b panel stg" type="button" data-k="stg" data-stage="0"><b>{{ $c.top.b_13 }}</b><span>{{ $c.top.span_14 }}</span></button>
      <button class="b panel stg" type="button" data-k="stg" data-stage="1"><b>{{ $c.top.b_15 }}</b><span>{{ $c.top.span_16 }}</span></button>
      <button class="b panel stg" type="button" data-k="stg" data-stage="2"><b>{{ $c.top.b_17 }}</b><span>{{ $c.top.span_18 }}</span></button>
      <button class="b panel stg" type="button" data-k="stg" data-stage="3"><b>{{ $c.top.b_19 }}</b><span>{{ $c.top.span_20 }}</span></button>
    </div>
  </section>