{{- $c := site.Data.content -}}
<section class="how sheet" id="how" aria-labelledby="how-h">
    <div class="how-pin">
      <div class="how-head">
        <p class="label" style="--dot:var(--fern)">{{ $c.how.p_1 }}</p>
        <h2 class="h2" id="how-h" style="margin-top:18px">{{ $c.how.h2_2 }}</h2>
        <p>{{ $c.how.p_3 }}</p>
        <ol class="dots" aria-hidden="true"><li class="on"></li><li></li><li></li><li></li></ol>
      </div>
      <ol class="stack">
        <li class="card c1">
          <span class="tab">{{ $c.how.span_4 }}</span>
          <svg viewBox="0 0 320 200" aria-hidden="true"><path d="M70 30h180a30 30 0 0 1 30 30v62a30 30 0 0 1-30 30H150l-44 34 8-34H70a30 30 0 0 1-30-30V60a30 30 0 0 1 30-30z" fill="#FFFBF4" /><use href="#i-heart" x="138" y="62" width="44" height="40" fill="#D2295F" /><circle cx="276" cy="40" r="22" fill="#FFD84D" /><circle cx="52" cy="160" r="12" fill="#FFC2D1" /></svg>
          <h3>{{ $c.how.h3_5 }}</h3>
          <p>{{ $c.how.p_6 }}</p>
        </li>
        <li class="card c2">
          <span class="tab">{{ $c.how.span_7 }}</span>
          <svg viewBox="0 0 320 200" aria-hidden="true"><ellipse cx="160" cy="182" rx="140" ry="12" fill="#FFDCC4" /><rect x="40" y="58" width="78" height="92" rx="26" fill="#0F6E62" /><rect x="30" y="112" width="98" height="40" rx="18" fill="#0B5A50" /><rect x="44" y="150" width="8" height="28" rx="4" fill="#2B1830" /><rect x="106" y="150" width="8" height="28" rx="4" fill="#2B1830" /><rect x="202" y="58" width="78" height="92" rx="26" fill="#D2295F" /><rect x="192" y="112" width="98" height="40" rx="18" fill="#B81E52" /><rect x="206" y="150" width="8" height="28" rx="4" fill="#2B1830" /><rect x="268" y="150" width="8" height="28" rx="4" fill="#2B1830" /><rect x="146" y="120" width="28" height="58" rx="6" fill="#FFA51F" /><rect x="136" y="112" width="48" height="12" rx="6" fill="#FFA51F" /><rect x="150" y="92" width="20" height="22" rx="5" fill="#FFFBF4" stroke="#2B1830" stroke-width="3" /><path d="M156 84c-4-6 4-8 0-14M164 84c-4-6 4-8 0-14" stroke="#2B1830" stroke-width="2.5" fill="none" stroke-linecap="round" /></svg>
          <h3>{{ $c.how.h3_8 }}</h3>
          <p>{{ $c.how.p_9 }}</p>
        </li>
        <li class="card c3">
          <span class="tab">{{ $c.how.span_10 }}</span>
          <svg viewBox="0 0 320 200" aria-hidden="true"><use href="#i-sun" x="184" y="10" width="110" height="110" fill="#FFA51F" /><path d="M118 132h84l-12 56h-60z" fill="#E07A4F" /><rect x="110" y="122" width="100" height="18" rx="6" fill="#C9653D" /><path d="M160 122V60" stroke="#CDEDE5" stroke-width="6" stroke-linecap="round" /><path d="M160 92c-30 4-48-12-50-36 26-2 46 12 50 36z" fill="#CDEDE5" /><path d="M160 76c26 0 42-16 42-38-24 0-42 16-42 38z" fill="#FFD84D" /></svg>
          <h3>{{ $c.how.h3_11 }}</h3>
          <p>{{ $c.how.p_12 }}</p>
        </li>
        <li class="card c4">
          <span class="tab">{{ $c.how.span_13 }}</span>
          <svg viewBox="0 0 320 200" aria-hidden="true"><circle cx="232" cy="78" r="38" fill="#FFFBF4" /><ellipse cx="90" cy="200" rx="150" ry="74" fill="#0F6E62" /><ellipse cx="270" cy="206" rx="130" ry="80" fill="#0B5A50" /><path d="M118 196c10-24 40-30 66-40s44-24 54-40" stroke="#FFFBF4" stroke-width="8" fill="none" stroke-linecap="round" stroke-dasharray="2 16" /><use href="#i-heart" x="40" y="30" width="34" height="30" fill="#D2295F" /></svg>
          <h3>{{ $c.how.h3_14 }}</h3>
          <p>{{ $c.how.p_15 }}</p>
        </li>
      </ol>
    </div>
  </section>