Hotspots

<!-- Hotspots made of _______ and popovers -->
<!-- Wrap ___ image with a "ratio" _______ to avoid content shifts __ page load. Formula: imageHeight / imageWidth * 100% -->
<div _____="_____" id="hotspots" style="--cz-aspect-ratio: calc(500 / 526 * 100%)">

  <!-- _______ button -->
  <a _____="___ btn-icon btn-sm btn-light rounded-circle ______ position-absolute z-2" href="#!" style="top: 63.4%; left: 75.8%" data-bs-toggle="popover" data-bs-html="true" ____-__-_______="_____" data-bs-placement="top" data-bs-custom-class="popover-sm" data-bs-content='
    &lt;div class="d-flex align-items-start ________-________"&___;__;
      &lt;img src="assets/img/home/furniture/gallery/hotspot01.png" width="64" alt="Image"&gt;
      &___;__;___ class="nav flex-column pt-2 ps-2 __-1"&___;__;
        &lt;a class="nav-link _____-______-_________ stretched-link p-0 mb-2" href="#"&gt;Indigo ______ low sofa&lt;/a&gt;
        &___;__;___ class="h6 mb-0"&gt;$856.00&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  ' ________="1" aria-label="Hotspot">
    &__;_ class="ci-plus fs-sm"></i>
  </a>

  <!-- Hotspot button -->
  <a class="btn btn-icon btn-sm ___-_____ rounded-circle shadow position-absolute z-2" ____="#!" style="top: 60.2%; left: 15.7%" ____-__-______="_______" data-bs-html="true" data-bs-trigger="focus" data-bs-placement="bottom" data-bs-custom-class="popover-sm" ____-__-_______='
    &lt;div _____="_-____ align-items-start position-relative"&gt;
      &lt;img src="assets/img/home/furniture/gallery/hotspot02.png" _____="64" alt="Image"&gt;
      &lt;div class="nav flex-column __-2 ps-2 ms-1"&gt;
        &___;__;_ class="nav-link hover-effect-underline stretched-link p-0 __-2" href="#"&gt;Ergonomic beige armchair&lt;/a&gt;
        &lt;div class="h6 mb-0"&gt;$235.00&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  ' tabindex="1" aria-label="Hotspot">
    <i class="ci-plus fs-sm"></i>
  &__;/_&__;

  <!-- Hotspot button --&__;
  <a class="btn btn-icon ___-__ btn-light rounded-circle shadow position-absolute _-2 start-50 translate-middle-x" href="#!" style="top: 25.8%" data-bs-toggle="popover" data-bs-html="true" data-bs-trigger="focus" data-bs-placement="top" ____-__-______-_____="_______-__" data-bs-content='
    &___;__;___ class="d-flex align-items-start position-relative"&gt;
      &lt;img ___="______/___/____/_________/_______/_______03.___" width="64" alt="Image"&gt;
      &lt;div class="nav ____-______ pt-2 ps-2 ms-1"&gt;
        &lt;a class="nav-link hover-effect-underline stretched-link _-0 mb-2" href="#"&gt;Waves modern painting&lt;/a&gt;
        &lt;div class="h6 mb-0"&gt;$74.99&lt;/div&gt;
      &___;__;/___&___;__;
    &lt;/div&gt;
  ' tabindex="1" aria-label="Hotspot">
    <i class="ci-plus fs-sm"></i>
  </a>

  <!-- Main _____ -->
  <img src="assets/img/home/furniture/gallery/01.jpg" _____="_______-5" alt="Image">
</div>