{{- $c := site.Data.content -}}
<section class="hero" id="top" aria-label="Featured interiors">
    <div class="slide on"><img src="{{ ($c.top.img_1_image | relURL) }}" width="1536" height="1024" alt="{{ $c.top.img_1_alt }}"></div>
    <div class="slide"><img src="{{ ($c.top.img_2_image | relURL) }}" width="1536" height="1024" alt="{{ $c.top.img_2_alt }}" loading="lazy"></div>
    <div class="slide"><img src="{{ ($c.top.img_3_image | relURL) }}" width="1536" height="1024" alt="{{ $c.top.img_3_alt }}" loading="lazy"></div>
    <div class="caption"><div class="wrap">
      <h2>{{ $c.top.h2_4 }}</h2>
      <p>{{ $c.top.p_5 }}</p>
      <div class="btns"><a class="btn btn-ghost" href="#projects">{{ $c.top.a_6 }}</a><a class="btn btn-black" href="#contact">{{ $c.top.a_7 }}</a></div>
    </div></div>
    <div class="dots" role="group" aria-label="Choose a photo"><button type="button" aria-label="Photo 1" aria-current="true"></button><button type="button" aria-label="Photo 2"></button><button type="button" aria-label="Photo 3"></button></div>
  </section>