{{- $c := site.Data.content -}}
<section class="sec hero" id="top" aria-labelledby="h-title">
    <h1 class="sr">{{ $c.top.h1_1 }}</h1>
    <div class="screen grid-on">
      <div class="slides">
        <figure class="slide"><img src="{{ ($c.top.img_2_image | relURL) }}" alt="{{ $c.top.img_2_alt }}"></figure>
        <figure class="slide"><img src="{{ ($c.top.img_3_image | relURL) }}" alt="{{ $c.top.img_3_alt }}" decoding="async"></figure>
        <figure class="slide"><img src="{{ ($c.top.img_4_image | relURL) }}" alt="{{ $c.top.img_4_alt }}" decoding="async"></figure>
      </div>
      <div class="gridlay" aria-hidden="true"></div>
      <div class="b ink h-tab" data-k="h-tab">
        <p class="small h-count" data-count>{{ $c.top.p_5 }}</p>
        <p class="h-cat" data-cat>{{ $c.top.p_6 }}</p>
      </div>
      <a class="b ink small h-more" href="#manifesto" data-k="h-more" data-more><span data-hover>{{ $c.top.span_7 }}</span></a>
      <p class="h-words" data-k="h-words" data-rise>{{ $c.top.p_8_html | safeHTML }}</p>
      <div class="b paper h-cap" data-k="h-cap">
        <p data-num>{{ $c.top.p_9 }}</p>
        <h2 id="h-title" data-title>{{ $c.top.h2_10_html | safeHTML }}</h2>
        <a class="small h-disc" href="#manifesto" data-disc><span data-hover>{{ $c.top.span_11 }}</span></a>
        <i class="h-bar" aria-hidden="true"><i></i></i>
      </div>
      <button class="b paper h-arrow" type="button" data-k="h-prev" aria-label="Previous project">‹</button>
      <button class="b paper h-arrow" type="button" data-k="h-next" aria-label="Next project">›</button>
    </div>
  </section>