{{- $c := site.Data.content -}}
<section class="hero" aria-roledescription="carousel" aria-label="Selected projects" data-hero>
  <h1 class="sr">{{ $c.hero.heading }}</h1>
  {{ range $s := $c.hero.slides }}<article class="slide {{ $s.state }}" aria-roledescription="slide" aria-label="{{ $s.label }}"><img src="{{ ($s.image | relURL) }}" width="1536" height="1024" alt="{{ $s.alt }}" loading="{{ $s.loading }}"><div class="cap"><h2>{{ $s.title }}</h2><a class="btn" href="#projects">{{ $c.hero.button }} <span class="arr" aria-hidden="true">→</span></a></div></article>{{ end }}
  <div class="bars" aria-hidden="true" data-bars>{{ range $s := $c.hero.slides }}<i></i>{{ end }}</div>
  <div class="hero-ctl">
    <p class="count" aria-live="polite"><b data-cur>01</b> / {{ $c.hero.count_total }}</p>
    <button type="button" aria-label="Previous project" data-prev><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 5l-7 7 7 7" /></svg></button>
    <button type="button" aria-label="Next project" data-next><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 5l7 7-7 7" /></svg></button>
  </div>
</section>