{{- $c := site.Data.content -}}
<section class="faq pad" id="faq" aria-labelledby="faq-h">
    <div class="faq-grid wrap">
      <div class="faq-side">
        <p class="eyebrow">{{ $c.faq.p_1 }}</p>
        <h2 id="faq-h" data-r>{{ $c.faq.h2_2_html | safeHTML }}</h2>
        <p data-r style="--d:.1s">{{ $c.faq.p_3_html | safeHTML }}</p>
      </div>
      <div class="acc">
        <details><summary>{{ $c.faq.text_4 }}<span class="pm" aria-hidden="true"><svg class="i"><use href="#i-plus" /></svg></span></summary><div class="ans"><p>{{ $c.faq.p_5 }}</p></div></details>
        <details><summary>{{ $c.faq.text_6 }}<span class="pm" aria-hidden="true"><svg class="i"><use href="#i-plus" /></svg></span></summary><div class="ans"><p>{{ $c.faq.p_7 }}</p></div></details>
        <details><summary>{{ $c.faq.text_8 }}<span class="pm" aria-hidden="true"><svg class="i"><use href="#i-plus" /></svg></span></summary><div class="ans"><p>{{ $c.faq.p_9 }}</p></div></details>
        <details><summary>{{ $c.faq.text_10 }}<span class="pm" aria-hidden="true"><svg class="i"><use href="#i-plus" /></svg></span></summary><div class="ans"><p>{{ $c.faq.p_11 }}</p></div></details>
        <details><summary>{{ $c.faq.text_12 }}<span class="pm" aria-hidden="true"><svg class="i"><use href="#i-plus" /></svg></span></summary><div class="ans"><p>{{ $c.faq.p_13 }}</p></div></details>
        <details><summary>{{ $c.faq.text_14 }}<span class="pm" aria-hidden="true"><svg class="i"><use href="#i-plus" /></svg></span></summary><div class="ans"><p>{{ $c.faq.p_15 }}</p></div></details>
      </div>
    </div>
  </section>