collection circle

<style>
  .zenith-collection-circle-list-template--23908885332267__collection_circle_list_93xx7Q {
    gap: 1%;
  }

  .zenith-collection-circle-list {
    display: flex;
    justify-content: center;
    user-select: none;
    padding: 1.5% 0;
    /* overflow-x: scroll; */
  }

  .circle-image {
    text-align: center;
  }

  .circle-image a {
    text-decoration: none;
  }

  .zenith-collection-circle-list .image-size-medium {
    width: 145px;
    height: 145px;
  }

  .circle-image-container-template--23908885332267__collection_circle_list_93xx7Q {
    border: #00000000 2px solid;
  }

  .circle-image-container {
    border-radius: 100px;
    overflow: hidden;
  }

  .circle-image img {
    aspect-ratio: 1;
  }

  .collection-bar-image {
    border-radius: 100px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease-in-out;
  }

  .zenith-collection-circle-list-template--23908885332267__collection_circle_list_93xx7Q .circle-title {
    margin-top: 11px;
  }

  .circle-image h4 {
    margin: 0;
    font-family: sans-serif;
    font-style: normal;
    font-size: 15px;
    font-weight: 400;
    color: rgb(0, 0, 0);
  }

  @media (max-width: 768px) {
    .zenith-collection-circle-list {
      padding: 3% 4%;
      flex-wrap: nowrap;
      justify-content: space-between;
      overflow-x: scroll;
    }

    .zenith-collection-circle-list .image-size-mob-medium {
      width: 90px;
      height: 90px;
    }

    .zenith-collection-circle-list H4 {
      font-size: 12px;
      text-wrap: nowrap;
    }
  }
</style>

<section id="shopify-section-template--23908885332267__collection_circle_list_93xx7Q" class="shopify-section section">
  <div
    class="zenith-collection-circle-list zenith-collection-circle-list-template--23908885332267__collection_circle_list_93xx7Q color-scheme-0bf1b44b-1e89-4ef9-8945-f415824eca7c"
    style="background-image: url(https://cdn.shopify.com/s/files/1/0630/4441/9827/files/BG_1ce01dc0-d88e-4061-9a20-eb1b126e1414.png?v=1748493507);background-repeat: no-repeat;
  object-fit: cover;
  background-size: cover;
  height:100%;
  width:100%;
  ">

    <div class="circle-image">
      <a href="https://thestudiobagru.com/collections/kota-doria-dupatta" contenteditable="false"
        style="cursor: pointer;">
        <div
          class="circle-image-container circle-image-container-template--23908885332267__collection_circle_list_93xx7Q image-size-medium image-size-mob-medium">
          <img
            src="https://cdn.shopify.com/s/files/1/0630/4441/9827/files/kota_dori_db847f70-f8e4-44e3-acd8-7f1597b1eb3f.png?v=1748495549"
            fetchpriority="high" alt="" class="collection-bar-image">
        </div>
        <h4 class="circle-title">Kota Doria</h4>
      </a>
    </div>

    <div class="circle-image">
      <a href="https://thestudiobagru.com/collections/mulmul-dupatta" contenteditable="false" style="cursor: pointer;">
        <div
          class="circle-image-container circle-image-container-template--23908885332267__collection_circle_list_93xx7Q image-size-medium image-size-mob-medium">
          <img
            src="https://cdn.shopify.com/s/files/1/0630/4441/9827/files/mulmul.png?v=1748681603"
            fetchpriority="high" alt="" class="collection-bar-image">
        </div>
        <h4 class="circle-title">Mulmul Dupatta</h4>
      </a>
    </div>

    <div class="circle-image">
      <a href="https://thestudiobagru.com/collections/maheshwari-suits" contenteditable="false" style="cursor: pointer;">
        <div
          class="circle-image-container circle-image-container-template--23908885332267__collection_circle_list_93xx7Q image-size-medium image-size-mob-medium">
          <img
            src="https://cdn.shopify.com/s/files/1/0630/4441/9827/files/maheshwari_suit.png?v=1748681616"
            fetchpriority="high" alt="" class="collection-bar-image">
        </div>
        <h4 class="circle-title">Maheshwari Suits</h4>
      </a>
    </div>

    <div class="circle-image">
      <a href="https://thestudiobagru.com/collections/gota-work-suits" contenteditable="false" style="cursor: pointer;">
        <div
          class="circle-image-container circle-image-container-template--23908885332267__collection_circle_list_93xx7Q image-size-medium image-size-mob-medium">
          <img
            src="https://cdn.shopify.com/s/files/1/0630/4441/9827/files/Designer_suits_c867e594-d8b3-44d1-a29b-4d4f9452242a.png?v=1748495548"
            fetchpriority="high" alt="" class="collection-bar-image">
        </div>
        <h4 class="circle-title">Designer Suits</h4>
      </a>
    </div>

    <div class="circle-image">
      <a href="https://thestudiobagru.com/collections/top-bottom-combo" contenteditable="false"
        style="cursor: pointer;">
        <div
          class="circle-image-container circle-image-container-template--23908885332267__collection_circle_list_93xx7Q image-size-medium image-size-mob-medium">
          <img
            src="https://cdn.shopify.com/s/files/1/0630/4441/9827/files/TOP_BOTTOM_144c4b5e-1559-4b67-9165-1499e69eca41.png?v=1748495549"
            fetchpriority="high" alt="" class="collection-bar-image">
        </div>
        <h4 class="circle-title">Top & Bottom Sets</h4>
      </a>
    </div>

    <!-- <div class="circle-image">
      <a href="https://thestudiobagru.com/collections/clearance-sale" contenteditable="false" style="cursor: pointer;">
        <div
          class="circle-image-container circle-image-container-template--23908885332267__collection_circle_list_93xx7Q image-size-medium image-size-mob-medium">
          <img
            src="https://cdn.shopify.com/s/files/1/0630/4441/9827/files/stitch_ed5326de-d77f-422a-a87f-2157fc202075.png?v=1748495549"
            fetchpriority="high" alt="" class="collection-bar-image">
        </div>
        <h4 class="circle-title">Stitch</h4>
      </a>
    </div> -->

  </div>

</section>