{{- $c := site.Data.content -}}
<section class="hero">
    <h1 class="sr">{{ $c.hero.h1_1 }}</h1>
    <p class="word" aria-hidden="true" data-fit><svg class="slice ch" viewBox="0 0 100 100"><use href="#slice" /></svg><span class="ch">{{ $c.hero.span_2 }}</span><span class="ch">{{ $c.hero.span_3 }}</span><span class="ch">{{ $c.hero.span_4 }}</span></p>
    <div class="cta">
      <a class="big" href="#shop"><span class="roll"><span>{{ $c.hero.span_5 }}</span><span aria-hidden="true">{{ $c.hero.span_6 }}</span></span></a>
      <a class="big" href="#workshop"><span class="roll"><span>{{ $c.hero.span_7 }}</span><span aria-hidden="true">{{ $c.hero.span_8 }}</span></span></a>
    </div>
    <figure class="stage">
      <img src="{{ ($c.hero.img_9_image | relURL) }}" width="1536" height="1024" alt="{{ $c.hero.img_9_alt }}" data-float>
      <figcaption>{{ $c.hero.figcaption_10 }}</figcaption>
    </figure>
  </section>