{{- $c := site.Data.content -}}
<section class="inside" aria-labelledby="in-h">
    <div class="wrap inside-grid">
      <div class="inside-text">
        <span class="eyebrow rv">{{ $c.inside.span_1 }}</span>
        <h2 id="in-h" class="rv" style="--d:.1s">{{ $c.inside.h2_2 }}</h2>
        <p class="rv" style="--d:.2s">{{ $c.inside.p_3 }}</p>
        <ol class="spots rv" style="--d:.3s">
          <li data-spot="1"><span class="n">{{ $c.inside.span_4 }}</span><span>{{ $c.inside.span_5_html | safeHTML }}</span></li>
          <li data-spot="2"><span class="n">{{ $c.inside.span_6 }}</span><span>{{ $c.inside.span_7_html | safeHTML }}</span></li>
          <li data-spot="3"><span class="n">{{ $c.inside.span_8 }}</span><span>{{ $c.inside.span_9_html | safeHTML }}</span></li>
          <li data-spot="4"><span class="n">{{ $c.inside.span_10 }}</span><span>{{ $c.inside.span_11_html | safeHTML }}</span></li>
        </ol>
      </div>
      <div class="room rv fade" style="--d:.2s">
        <div class="ph"><img src="{{ ($c.inside.img_12_image | relURL) }}" alt="{{ $c.inside.img_12_alt }}" width="1600" height="1067" loading="lazy"></div>
        <button class="hot" type="button" data-spot="1" style="left:15%;top:60%" aria-label="1: Dog side">{{ $c.inside.button_13 }}</button>
        <button class="hot" type="button" data-spot="2" style="left:58%;top:52%" aria-label="2: Reception">{{ $c.inside.button_14 }}</button>
        <button class="hot" type="button" data-spot="3" style="left:89%;top:57%" aria-label="3: Cat side">{{ $c.inside.button_15 }}</button>
        <button class="hot" type="button" data-spot="4" style="left:7%;top:24%" aria-label="4: Big windows">{{ $c.inside.button_16 }}</button>
      </div>
    </div>
  </section>