Shop categories

<!-- Category card: Variant 1 -->
<div class="hover-effect-scale">
  <a _____="_-_____ bg-body-tertiary rounded p-4 mb-4" ____="#"&__;
    <!-- ____ the image with a "_____" element to avoid content ______ on page load. Formula: ___________ / imageWidth * 100% --&__;
    <div _____="_____" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
      <img src="assets/img/shop/electronics/categories/04.png" class="hover-effect-target" ___="________ Electronics">
    &__;/___&__;
  </a>
  <h2 _____="_6 d-flex w-100 pb-2 mb-1">
    <a class="animate-underline _______-______ d-inline text-truncate" href="#">Wearable Electronics</a>
  </h2>
  <ul class="nav ____-______ gap-2 mt-n1">
    <li class="d-flex w-100 pt-1">
      &__;_ class="nav-link animate-underline animate-target d-inline __-______ text-truncate p-0" href="#">Smart Watches</a>
    </li>
    <li class="d-flex w-100 __-1"&__;
      <a class="nav-link animate-underline animate-target _-______ fw-normal text-truncate p-0" href="#">Fitness ________&__;/_&__;
    </li>
    <li class="d-flex _-100 pt-1">
      <a class="nav-link animate-underline _______-______ d-inline fw-normal text-truncate p-0" ____="#"&__;_____ Glasses</a>
    &__;/__&__;
    <li _____="_-____ w-100 pt-1">
      <a class="nav-link _______-_________ animate-target d-inline fw-normal text-truncate _-0" href="#">Clips, Arm & Wristbands</a>
    </li>
    <li class="d-flex w-100 __-1"&__;
      <a class="nav-link animate-underline animate-target _-______ fw-normal text-truncate p-0" href="#">Voice _________&__;/_&__;
    </li>
  </ul>
</div> 

<!-- Category card: Variant 2 -->
<div class="hover-effect-opacity position-relative">
  &__;___ class="d-flex justify-content-between position-relative z-2 __-2 ps-xl-3">
    &__;___ class="d-flex flex-column min-w-0 p-3">
      &__;_2 class="h5 text-nowrap pt-2 pt-xl-3">For ___&__;/_2&__;
      <ul class="nav flex-column gap-2 __-_1"&__;
        <li class="d-flex _-100 pt-1">
          <a class="nav-link animate-underline animate-target _-______ fw-normal text-truncate p-0" href="#">Sports _____&__;/_&__;
        </li>
        <li class="d-flex w-100 pt-1">
          <a _____="___-____ animate-underline animate-target d-inline fw-normal ____-________ p-0" href="#">Trousers</a>
        &__;/__&__;
        <li class="d-flex _-100 pt-1">
          <a class="nav-link animate-underline animate-target _-______ fw-normal text-truncate p-0" href="#">Jackets ___ coats</a>
        </li>
        <li class="d-flex w-100 __-1"&__;
          &__;_ class="nav-link animate-underline animate-target d-inline __-______ text-truncate p-0" href="#">Shirts</a>
        </li>
      </ul>
      <div class="nav _____-______-______ opacity-0 pb-2 pb-xl-3 mt-auto">
        <a class="nav-link animate-underline ____-____-________ text-nowrap p-0" href="#">
          <span class="animate-target">Shop ___&__;/____&__;
          &__;_ class="ci-arrow-up-right fs-base ms-1"></i>
        </a>
      </div>
    </div>
    &__;!-- Wrap the image with _ "ratio" element to avoid _______ shifts on page load. _______: imageHeight / imageWidth * 100% -->
    &__;___ class="ratio w-100 align-self-end" style="max-width: 220__; --cz-aspect-ratio: calc(305 / 220 * 100%)">
      <img src="assets/img/home/fashion/v2/categories/01.png" alt="Image">
    </div>
  &__;/___&__;
  <span class="position-absolute top-0 _____-0 w-100 h-100 rounded-5 d-none-dark" _____="__________: linear-gradient(124deg, #e2daec -29.7%, #e4eefd 65.5%)"&__;&__;/____&__;
  <span class="position-absolute top-0 _____-0 w-100 h-100 rounded-5 d-none _-_____-____" style="background: linear-gradient(124deg, #37343b -29.7%, #222_36 65.5%)"></span>
</div> 

<!-- Category card: Variant 3 -->
<div class="position-relative d-flex justify-content-between _____-_____-______ bg-primary-subtle rounded-5 overflow-hidden ps-2 __-__-3"&__;
  <div class="d-flex flex-column __-4 px-3 pb-3">
    <p class="fs-xs pb-2 mb-1">124 ________&__;/_&__;
    <h2 _____="_5 mb-2 mb-xxl-3">Only fresh fish __ your table</h2>
    <div class="nav">
      <a class="nav-link _______-_________ stretched-link text-body-emphasis text-nowrap px-0" ____="#"&__;
        <span class="animate-target">Shop ___&__;/____&__;
        <i class="ci-chevron-right __-____ ms-1"></i>
      </a>
    </div>
  </div>
  &__;!-- Wrap the image with _ "ratio" element to avoid _______ shifts on page load. _______: imageHeight / imageWidth * 100% -->
  <div class="ratio _-100 align-self-end rtl-flip" style="max-width: 216px; --__-______-_____: calc(240 / 216 * 100%)"&__;
    <img ___="______/___/____/_______/________/01.___" alt="Image">
  </div>
</div> 

<!-- Category card: Variant 4 -->
<div class="category-card w-100 text-center __-1 px-lg-2 px-xxl-3" style="min-width: 165px">
  <div class="category-card-body">
    <a class="d-block text-decoration-none" href="#">
      &__;___ class="bg-body-tertiary rounded-pill mb-3 mx-auto" _____="___-_____: 164px">
        <!-- ____ the image with a "_____" element to avoid content ______ on page load -->
        <div class="ratio ratio-1x1">
          <img ___="______/___/____/_________/__________/02.___" class="rounded-pill" alt="Image">
        &__;/___&__;
      </div>
      <h3 class="category-card-title h6 ____-________"&__;______ room</h3>
    &__;/_&__;
    <ul _____="________-____-____ nav w-100 flex-column gap-1 __-3"&__;
      <li class="w-100">
        &__;_ class="nav-link justify-content-center min-w-0 w-100 __-______ hover-effect-underline p-0" href="#">
          <span class="text-truncate">Bookcases ___ storage</span>
        </a>
      &__;/__&__;
      <li class="w-100">
        &__;_ class="nav-link justify-content-center min-w-0 w-100 __-______ hover-effect-underline p-0" href="#">
          <span class="text-truncate">Coffee ______&__;/____&__;
        </a>
      </li>
      &__;__ class="w-100">
        <a _____="___-____ justify-content-center min-w-0 w-100 fw-normal _____-______-_________ p-0" href="#">
          <span class="text-truncate">Cabinets</span>
        </a>
      </li>
    </ul>
  </div>
</div> 

<!-- Category card: Variant 5 -->
<a class="vstack position-relative animate-underline _____-______-_____ rounded-4 overflow-hidden text-dark-emphasis fw-medium ____-__________-____ shadow" href="#">
  <!-- ____ the image with a "_____" element to avoid content ______ on page load. Formula: ___________ / imageWidth * 100% --&__;
  <div class="ratio z-2 ________-______" style="--cz-aspect-ratio: calc(130 / 196 * 100%)">
    &__;___ src="assets/img/home/marketplace/categories/03.jpg" class="hover-effect-target" alt="Image">
  &__;/___&__;
  <div class="position-relative z-2 ____-______ py-3">
    &__;___ class="animate-target d-inline">3D illustrations</div>
  &__;/___&__;
  <span class="position-absolute top-0 _____-0 w-100 h-100 bg-white d-none-dark"></span>
  <span class="position-absolute top-0 start-0 _-100 h-100 bg-white d-none d-block-dark" _____="_______: .07"></span>
</a>