icon and text

<style>
  .product__block.product__block--medium {
    margin-bottom: 4px;
  }

  .product__callouts-items[data-with-box=true] {
    border: 1px solid #aaaaaa;
    padding: 0 4px;
    border-radius: 10px;
  }

  #shopify-section-template--20037467832498__main .product__callouts-item {
    align-items: center;
  }

  .fs-body-75 {
    font-size: 17.76px;
  }

  .product__callouts-item {
    display: flex;
    padding: 4px 0;
  }

  html.do-anim .animation--lazy-load {
    overflow: hidden;
  }

  .image.loaded {
    background-color: transparent;
  }

  .product__callouts-item-icon,
  .product__callouts-item-icon.image {
    margin-right: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    flex-shrink: 0;
  }

  .product__callouts-item-icon img,
  .product__callouts-item-icon.image img {
    width: 100%;
    height: auto;
  }

  .image>* {
    display: block;
    max-width: 100%;
    object-position: center center;
  }

  .product__callouts-item-text p:first-child {
    margin-top: 3.552px;
  }

  .rte p:last-child {
    margin-bottom: 0;
  }

  .rte p {
    font-family: Quicksand, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0px;
  }

  .product__callouts-items[data-with-dividers=true] .product__callouts-item:not(:first-child) {
    border-top: 1px solid #aaaaaa;
  }

  .product__callouts-item-icon,
  .product__callouts-item-icon.icon {
    margin-right: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    flex-shrink: 0;
  }

  .product__callouts-item-icon svg,
  .product__callouts-item-icon.icon svg {
    width: 100%;
    height: auto;
  }

  .icon svg {
    display: block;
  }
</style>
{% assign product_color = product.metafields.custom.color %}
{% assign product_fabric = product.metafields.custom.fabric %}

{% unless product_color %}
  {% for option in product.selected_or_first_available_variant.options %}
    {% if product.options[forloop.index0] == 'Color' %}
      {% assign product_color = option %}
    {% endif %}
  {% endfor %}
{% endunless %}

{% unless product_fabric %}
  {% for option in product.selected_or_first_available_variant.options %}
    {% if product.options[forloop.index0] == 'Fabric' %}
      {% assign product_fabric = option %}
    {% endif %}
  {% endfor %}
{% endunless %}

<div class="product__block product__block-callouts product__callouts product__block--medium">
  <div class="product__callouts-items" data-with-box="true" data-with-dividers="true">

    <div class="product__callouts-item fs-body-75">
      <div class="image product__callouts-item-icon animation--lazy-load loaded">
        <img alt="" class="image__img" loading="lazy" width="50" height="50"
          src="//kalpraag.com/cdn/shop/files/icons8-color-50.png?v=1697696018&width=320" srcset="" sizes="32px"
          onload="javascript: this.closest('.image').classList.add('loaded')">
      </div>
      <div class="product__callouts-item-text rte">
        <p><span class="metafield-multi_line_text_field">Color:-{{ product_color }}</span></p>
      </div>
    </div>

    <div class="product__callouts-item fs-body-75">
      <span class="icon icon-new icon-cotton product__callouts-item-icon">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M16.823 16.05a4.246 4.246 0 0 0-.578-8.452 4.245 4.245 0 1 0-8.49 0 4.245 4.245 0 0 0-.578 8.452"
            stroke="currentColor" stroke-width=".987" stroke-miterlimit="6.667"></path>
          <path d="M12 22.068v-3.845" stroke="currentColor" stroke-width="1.05" stroke-miterlimit="6.667"></path>
          <path d="M13.943 14.863A6.648 6.648 0 0 0 12 9.791a6.65 6.65 0 0 0-1.942 5.081" stroke="currentColor"
            stroke-width=".987" stroke-miterlimit="6.667"></path>
          <path
            d="M12 19.033a5.43 5.43 0 0 0-5.43-5.43 5.43 5.43 0 0 0 5.43 5.43zm0 0a5.43 5.43 0 0 0 5.43-5.43 5.43 5.43 0 0 0-5.43 5.43zM14.106 8.175a4.245 4.245 0 0 1 6.384 3.668M9.894 8.175a4.245 4.245 0 0 0-6.384 3.668"
            stroke="currentColor" stroke-width=".987" stroke-miterlimit="6.667"></path>
        </svg>
      </span>
      <div class="product__callouts-item-text rte">
        <p><span class="metafield-multi_line_text_field">Fabric:- {{ product_fabric }}</span></p>
      </div>
    </div>

    <div class="product__callouts-item fs-body-75">
      <span class="icon icon-new icon-clothes-button product__callouts-item-icon">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 20.85A8.851 8.851 0 1 0 12 3.15a8.851 8.851 0 0 0 0 17.702z" stroke="currentColor"
            stroke-width=".998" stroke-miterlimit="10" stroke-linecap="round"></path>
          <path d="M12 18.862a6.862 6.862 0 1 0 0-13.724 6.862 6.862 0 0 0 0 13.724z" stroke="currentColor"
            stroke-width=".998" stroke-miterlimit="10"></path>
          <path
            d="M12 10.075a1.485 1.485 0 1 0 0-2.97 1.485 1.485 0 0 0 0 2.97zM15.41 13.485a1.485 1.485 0 1 0 0-2.97 1.485 1.485 0 0 0 0 2.97zM12 16.895a1.485 1.485 0 1 0 0-2.97 1.485 1.485 0 0 0 0 2.97zM8.59 13.485a1.485 1.485 0 1 0 0-2.97 1.485 1.485 0 0 0 0 2.97z"
            stroke="currentColor" stroke-width=".913" stroke-miterlimit="10"></path>
        </svg>
      </span>
      <div class="product__callouts-item-text rte">
        <p><span class="metafield-multi_line_text_field">Resham and sequined embroidery</span></p>
      </div>
    </div>

    <div class="product__callouts-item fs-body-75">
      <span class="icon icon-new icon-model-silhouette product__callouts-item-icon">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M12 9.003a3.049 3.049 0 1 0 0-6.098 3.049 3.049 0 0 0 0 6.098zM12 9.003H9.769a4.222 4.222 0 0 0-4.222 4.222v7.295c0 1.824 2.695 1.824 2.695 0v-7.754M12 9.003h2.231a4.222 4.222 0 0 1 4.222 4.222v7.295c0 1.824-2.695 1.824-2.695 0v-7.754M8.242 19.172h7.516"
            stroke="currentColor" stroke-width="1.018" stroke-miterlimit="6.667"></path>
        </svg>
      </span>
      <div class="product__callouts-item-text rte">
        <p><span class="metafield-multi_line_text_field">Pack Contain:- 1 Kurta:: Patiyala::Dupatta</span></p>
      </div>
    </div>

  </div>
</div>