Product Page highlight

<div class="yash-collection-circle-list">
  <div class="circle-image">
      <a href="https://ethnikease.com/collections/premium-collection">
          <div class="circle-image-container">
              <img src="https://ethnikease.com/cdn/shop/files/WhatsAppImage2024-09-05at5.18.14PM_50b04ac4-84cc-42d1-b134-300732cec7b4.jpg?v=1726198079&width=823"
                  fetchpriority="high" alt="Premium Collection" class="collection-bar-image">
          </div>
          <h4 class="circle-title">Premium</h4>
      </a>
  </div>

  <div class="circle-image">
      <a href="https://ethnikease.com/collections/wedding-season">
          <div class="circle-image-container">
              <img src="https://cdn.shopify.com/s/files/1/0922/0430/2651/files/05_20.webp?v=1742357721"
                  fetchpriority="high" alt="Wedding" class="collection-bar-image">
          </div>
          <h4 class="circle-title">Wedding</h4>
      </a>
  </div>

  <div class="circle-image">
      <a href="https://ethnikease.com/collections/anarkali-dress">
          <div class="circle-image-container">
              <img src="https://ethnikease.com/cdn/shop/files/WhatsAppImage2024-04-29at9.48.35PM.jpg?v=1714412725&width=823"
                  fetchpriority="high" alt="Anarkali" class="collection-bar-image">
          </div>
          <h4 class="circle-title">Anarkali</h4>
      </a>
  </div>

  <div class="circle-image">
      <a href="https://ethnikease.com/collections/maxi">
          <div class="circle-image-container">
              <img src="https://cdn.shopify.com/s/files/1/0922/0430/2651/files/01_2.webp?v=1742357721"
                  fetchpriority="high" alt="Maxi" class="collection-bar-image">
          </div>
          <h4 class="circle-title">Maxi</h4>
      </a>
  </div>

  <div class="circle-image">
      <a href="https://ethnikease.com/collections/flower-print">
          <div class="circle-image-container">
              <img src="https://ethnikease.com/cdn/shop/files/photo_2024-11-30_10-34-40.jpg?v=1732943129&width=823"
                  fetchpriority="high" alt="Flower Print" class="collection-bar-image">
          </div>
          <h4 class="circle-title">Flower Print</h4>
      </a>
  </div>

<div class="circle-image">
      <a href="https://ethnikease.com/collections/embroidery">
          <div class="circle-image-container">
              <img src="https://cdn.shopify.com/s/files/1/0922/0430/2651/files/05_23.webp?v=1742357721"
                  fetchpriority="high" alt="Embroidery" class="collection-bar-image">
          </div>
          <h4 class="circle-title">Embroidery</h4>
      </a>
  </div>




</div>

<style>
  .yash-collection-circle-list {
      display: flex;
      overflow-x: auto;
      padding: 20px;
      scrollbar-width: thin;
      background: linear-gradient(357deg, #f7bbb2, #ec9991);
      justify-content: center;
  }

  .circle-image {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      flex-shrink: 0;
      width: 120px;
  }

  .circle-image-container {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid #b25f56;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .circle-image-container img {
      width: 100%;
      height: auto;
      object-fit: cover;
  }

  .circle-title {
      font-size: 14px;
      color: #333;
      margin-top: 8px;
  }

  a {
      text-decoration: none;
  }

  /* Custom scrollbar for Webkit browsers */
  .yash-collection-circle-list::-webkit-scrollbar {
      height: 8px;
  }

  .yash-collection-circle-list::-webkit-scrollbar-thumb {
      background: #aaa;
      border-radius: 4px;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
      .yash-collection-circle-list {
          padding: 10px;
          justify-content: flex-start;
          /* Ensures items remain centrally aligned on small screens */
      }

      .circle-image-container {
          width: 80px;
          height: 80px;
      }

      .circle-image {
          width: 100px;
      }

      .circle-title {
          font-size: 12px;
      }
  }
</style>