{{- $c := site.Data.content -}}
<section class="steps" id="how" aria-labelledby="how-h">
    <div class="wrap steps-grid">
      <div>
        <div class="rv">
          <span class="eyebrow">{{ $c.how.span_1 }}</span>
          <h2 class="h2" id="how-h">{{ $c.how.h2_2 }}</h2>
        </div>
        <ol class="step-list rv" style="--d:.1s" data-steps>
          <li class="step on"><button type="button" aria-expanded="true" aria-controls="st-1">{{ $c.how.button_3_html | safeHTML }}</button><p class="txt" id="st-1">{{ $c.how.p_4 }}</p></li>
          <li class="step"><button type="button" aria-expanded="false" aria-controls="st-2">{{ $c.how.button_5_html | safeHTML }}</button><p class="txt" id="st-2">{{ $c.how.p_6 }}</p></li>
          <li class="step"><button type="button" aria-expanded="false" aria-controls="st-3">{{ $c.how.button_7_html | safeHTML }}</button><p class="txt" id="st-3">{{ $c.how.p_8 }}</p></li>
          <li class="step"><button type="button" aria-expanded="false" aria-controls="st-4">{{ $c.how.button_9_html | safeHTML }}</button><p class="txt" id="st-4">{{ $c.how.p_10 }}</p></li>
        </ol>
      </div>
      <div class="viewer rv" style="--d:.15s">
        <span class="geo2" aria-hidden="true"></span>
        <span class="geo3" aria-hidden="true"></span>
        <div class="frames" data-frames>
          <img class="on" src="{{ ($c.how.img_11_image | relURL) }}" alt="{{ $c.how.img_11_alt }}" width="1600" height="1067" loading="lazy">
          <img src="{{ ($c.how.img_12_image | relURL) }}" alt width="1600" height="1067" loading="lazy">
          <img src="{{ ($c.how.img_13_image | relURL) }}" alt width="1254" height="1254" loading="lazy">
          <img src="{{ ($c.how.img_14_image | relURL) }}" alt width="1254" height="1254" loading="lazy">
        </div>
        <div class="bars" aria-hidden="true" data-bars><span><i></i></span><span><i></i></span><span><i></i></span><span><i></i></span></div>
      </div>
    </div>
  </section>