<section class="fjord-hero" aria-labelledby="fjord-hero-title">
    <div class="fjord-hero__slider" data-hero-slider>
      <article class="fjord-hero__slide is-active" style="background-image:url('https://framerusercontent.com/images/s1Gw9pyuUEC9vViCqmou6hRgI.webp?width=2400&height=1200');">
        <div class="fjord-hero__overlay" aria-hidden="true"></div>
        <div class="fjord-hotspots" aria-hidden="true">
          <button class="fjord-hotspot" type="button" style="--x: 32%; --y: 32%;">
            <span class="fjord-hotspot__icon">+</span>
            <span class="fjord-hotspot__card">
              <img src="https://framerusercontent.com/images/1c3s4XR0YhiP5U0jMudG8pcXqDA.webp?width=120&height=120" alt="">
              <span>Soft leather, durable cushioning.</span>
            </span>
          </button>
          <button class="fjord-hotspot" type="button" style="--x: 60%; --y: 58%;">
            <span class="fjord-hotspot__icon">+</span>
            <span class="fjord-hotspot__card">
              <img src="https://framerusercontent.com/images/vb8XKVhsi1CNqzR5Bozhb2yTXeo.webp?width=120&height=120" alt="">
              <span>Handcrafted wood finish.</span>
            </span>
          </button>
          <button class="fjord-hotspot" type="button" style="--x: 78%; --y: 70%;">
            <span class="fjord-hotspot__icon">+</span>
            <span class="fjord-hotspot__card">
              <img src="https://framerusercontent.com/images/GbiVrsgrVhulfQoqpcQTKA1u4.webp?width=120&height=120" alt="">
              <span>Ergonomic and supportive.</span>
            </span>
          </button>
        </div>
        <div class="fjord-hero__card">
          <h1 id="fjord-hero-title">Crafting Comfort,<br>Inspired by the North</h1>
          <p>Crafted for style and lasting durability, perfect for any space.</p>
          <a class="fjord-btn" href="#">Ver producto</a>
        </div>
      </article>
      <article class="fjord-hero__slide" style="background-image:url('https://framerusercontent.com/images/M8cpp44fcecDccZvJuknm85uc.webp?width=2400&height=1200');">
        <div class="fjord-hero__overlay" aria-hidden="true"></div>
        <div class="fjord-hotspots" aria-hidden="true">
          <button class="fjord-hotspot" type="button" style="--x: 38%; --y: 36%;">
            <span class="fjord-hotspot__icon">+</span>
            <span class="fjord-hotspot__card">
              <img src="https://framerusercontent.com/images/ppC0TOwOtlTewHNf7WaCGikU.webp?width=120&height=120" alt="">
              <span>Smooth, curved wood for support.</span>
            </span>
          </button>
          <button class="fjord-hotspot" type="button" style="--x: 66%; --y: 56%;">
            <span class="fjord-hotspot__icon">+</span>
            <span class="fjord-hotspot__card">
              <img src="https://framerusercontent.com/images/iDjFIbeOY7plKQSKHHFlkGVJyg.webp?width=120&height=120" alt="">
              <span>Soft padding for added comfort.</span>
            </span>
          </button>
        </div>
        <div class="fjord-hero__card">
          <h2>Natural Elegance<br>in Every Detail</h2>
          <p>Crafted from solid oak with a smooth finish, timeless and durable.</p>
          <a class="fjord-btn" href="#">Ver producto</a>
        </div>
      </article>
      <article class="fjord-hero__slide" style="background-image:url('https://framerusercontent.com/images/yWfiT9hCK49Xggoq1k9TvLHyUY.webp?width=2400&height=1200');">
        <div class="fjord-hero__overlay" aria-hidden="true"></div>
        <div class="fjord-hotspots" aria-hidden="true">
          <button class="fjord-hotspot" type="button" style="--x: 40%; --y: 42%;">
            <span class="fjord-hotspot__icon">+</span>
            <span class="fjord-hotspot__card">
              <img src="https://framerusercontent.com/images/VoEmH1ywV91w47wrTCDlGjxtk.webp?width=120&height=120" alt="">
              <span>Solid wood with metal accents.</span>
            </span>
          </button>
          <button class="fjord-hotspot" type="button" style="--x: 68%; --y: 64%;">
            <span class="fjord-hotspot__icon">+</span>
            <span class="fjord-hotspot__card">
              <img src="https://framerusercontent.com/images/AkTgfzbvVkgxks7FPF6tzFzn9E.webp?width=120&height=120" alt="">
              <span>Sleek, minimalist tubular design.</span>
            </span>
          </button>
        </div>
        <div class="fjord-hero__card">
          <h2>Modern Minimalism,<br>Maximum Comfort</h2>
          <p>Simple, sleek, and built for a cozy, stylish lifestyle.</p>
          <a class="fjord-btn" href="#">Ver producto</a>
        </div>
      </article>
      <button class="fjord-hero__control fjord-hero__control--prev" type="button" aria-label="Previous">
        <img src="https://framerusercontent.com/images/6tTbkXggWgQCAJ4DO2QEdXXmgM.svg" alt="">
      </button>
      <button class="fjord-hero__control fjord-hero__control--next" type="button" aria-label="Next">
        <img src="https://framerusercontent.com/images/11KSGbIZoRSg4pjdnUoif6MKHI.svg" alt="">
      </button>
    </div>
  </section>
