{{- $c := site.Data.content -}}
<footer class="foot">
  <div class="foot-mq" aria-hidden="true">
    <div class="mq-track">
      <div class="mq-group"><span>{{ $c.footer.span_1 }}</span><span class="dot">✦</span><span>{{ $c.footer.span_2 }}</span><span class="dot">✦</span></div>
      <div class="mq-group"><span>{{ $c.footer.span_3 }}</span><span class="dot">✦</span><span>{{ $c.footer.span_4 }}</span><span class="dot">✦</span></div>
    </div>
  </div>
  <div class="foot-grid wrap">
    <div class="foot-brand">
      <a class="logo" href="#top" aria-label="Selune Skin Clinic, back to top"><svg class="mark" viewBox="0 0 40 40" aria-hidden="true"><use href="#mk" /></svg><span class="word" aria-hidden="true">{{ $c.footer.span_5_html | safeHTML }}</span></a>
      <p>{{ $c.footer.p_6 }}</p>
    </div>
    <div><h2>{{ $c.footer.h2_7 }}</h2><p>{{ $c.footer.p_8_html | safeHTML }}</p></div>
    <div><h2>{{ $c.footer.h2_9 }}</h2><ul><li>{{ $c.footer.li_10 }}</li><li>{{ $c.footer.li_11 }}</li><li>{{ $c.footer.li_12 }}</li></ul></div>
    <div><h2>{{ $c.footer.h2_13 }}</h2><ul><li><a href="tel:+15550142290">{{ $c.footer.a_14 }}</a></li><li><a href="mailto:hello@selune.example">{{ $c.footer.a_15 }}</a></li><li><a href="#book">{{ $c.footer.a_16 }}</a></li></ul></div>
    <nav aria-label="Footer"><h2>{{ $c.footer.h2_17 }}</h2><ul><li><a href="#treatments">{{ $c.footer.a_18 }}</a></li><li><a href="#team">{{ $c.footer.a_19 }}</a></li><li><a href="#prices">{{ $c.footer.a_20 }}</a></li><li><a href="#faq">{{ $c.footer.a_21 }}</a></li></ul></nav>
  </div>
  <div class="foot-base wrap">
    <p>{{ $c.footer.p_22 }}</p>
    <a href="#top">{{ $c.footer.a_23 }}</a>
  </div>
</footer>
<div class="dock" data-dock>
  <a href="#book">{{ $c.footer.a_24 }}</a>
  <a href="tel:+15550142290"><svg class="i" aria-hidden="true"><use href="#i-phone" /></svg>{{ $c.footer.text_25 }}</a>
</div>