{{- $c := site.Data.content -}}
<section class="why" id="why" aria-labelledby="why-h">
    <p class="watermark" aria-hidden="true">{{ $c.why.p_1 }}</p>
    <div class="why-grid wrap">
      <div class="why-side">
        <div class="why-stick">
          <p class="eyebrow">{{ $c.why.p_2 }}</p>
          <h2 id="why-h">{{ $c.why.h2_3_html | safeHTML }}</h2>
          <p class="sub">{{ $c.why.p_4 }}</p>
          <div class="dots" aria-hidden="true"><i class="on"></i><i></i><i></i><span data-count>{{ $c.why.span_5 }}</span></div>
        </div>
      </div>
      <ol class="why-list">
        <li class="wcard" data-r>
          <figure class="arch"><img src="{{ ($c.why.img_6_image | relURL) }}" alt width="1600" height="1067" loading="lazy" decoding="async"></figure>
          <span class="big-num" aria-hidden="true">{{ $c.why.span_7 }}</span>
          <h3>{{ $c.why.h3_8 }}</h3>
          <p>{{ $c.why.p_9 }}</p>
          <div class="rule-star" aria-hidden="true"><svg><use href="#spark" /></svg></div>
        </li>
        <li class="wcard" data-r>
          <figure class="arch"><img src="{{ ($c.why.img_10_image | relURL) }}" alt width="1600" height="1067" loading="lazy" decoding="async"></figure>
          <span class="big-num" aria-hidden="true">{{ $c.why.span_11 }}</span>
          <h3>{{ $c.why.h3_12 }}</h3>
          <p>{{ $c.why.p_13 }}</p>
          <div class="rule-star" aria-hidden="true"><svg><use href="#spark" /></svg></div>
        </li>
        <li class="wcard" data-r>
          <figure class="arch"><img src="{{ ($c.why.img_14_image | relURL) }}" alt width="1024" height="1536" loading="lazy" decoding="async"></figure>
          <span class="big-num" aria-hidden="true">{{ $c.why.span_15 }}</span>
          <h3>{{ $c.why.h3_16 }}</h3>
          <p>{{ $c.why.p_17 }}</p>
          <div class="rule-star" aria-hidden="true"><svg><use href="#spark" /></svg></div>
        </li>
      </ol>
    </div>
  </section>