{{- $c := site.Data.content -}}
<section class="home" id="home" aria-labelledby="h-title" aria-roledescription="carousel">
    <h1 class="sr">{{ $c.home.h1_1 }}</h1>
    <div class="stage">
      <figure class="slide"><img src="{{ ($c.home.img_2_image | relURL) }}" alt="{{ $c.home.img_2_alt }}"></figure>
      <figure class="slide"><img src="{{ ($c.home.img_3_image | relURL) }}" alt="{{ $c.home.img_3_alt }}" decoding="async"></figure>
      <figure class="slide"><img src="{{ ($c.home.img_4_image | relURL) }}" alt="{{ $c.home.img_4_alt }}" decoding="async"></figure>
      <figure class="slide"><img src="{{ ($c.home.img_5_image | relURL) }}" alt="{{ $c.home.img_5_alt }}" decoding="async"></figure>
      <figure class="slide"><img src="{{ ($c.home.img_6_image | relURL) }}" alt="{{ $c.home.img_6_alt }}" decoding="async"></figure>
      <figure class="slide"><img src="{{ ($c.home.img_7_image | relURL) }}" alt="{{ $c.home.img_7_alt }}" decoding="async"></figure>
    </div>
    <div class="tab">
      <p class="caps t-count" data-count>{{ $c.home.p_8 }}</p>
      <p class="t t-cat" data-cat-label>{{ $c.home.p_9 }}</p>
    </div>
    <a class="caps t-more" href="#contacts" data-more><span data-hover>{{ $c.home.span_10 }}</span></a>
    <p class="t words" data-rise>{{ $c.home.p_11_html | safeHTML }}</p>
    <div class="cap" aria-live="polite">
      <p class="t c-num" data-num>{{ $c.home.p_12 }}</p>
      <h2 class="t c-title" id="h-title" data-title>{{ $c.home.h2_13_html | safeHTML }}</h2>
      <a class="caps c-more" href="#contacts"><span data-hover>{{ $c.home.span_14 }}</span></a>
      <i class="c-bar" aria-hidden="true"><i></i></i>
    </div>
    <div class="nav">
      <button class="prev" type="button" aria-label="Previous">‹</button>
      <button class="next" type="button" aria-label="Next">›</button>
    </div>
  </section>