{% load static %} {% for i in prod %}
<div class="col-xl-3 col-lg-4 col-md-6">
  <div
    class="card border-0 product mb-6"
    onclick='location.href="productDetails/{{i.id}}";'
  >
    <div
      class="position-relative d-flex align-items-center bg-light w-100"
      style="min-height: 400px"
    >
      <img src="media/{{ i.image }}" alt="Bio-shroom Rejuvenating Serum" />
      <div class="card-img-overlay d-flex p-3 flex-column">
        <div></div>
        <div
          class="w-100 content-change-horizontal d-flex justify-content-center mt-auto"
        >
          <a
            href="https://wa.me/7506157743/?text=urlencodedtext"
            data-toggle="tooltip"
            data-placement="top"
            title="Whats App"
            class="add-to-cart d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mr-2"
          >
            <img src='{% static "images/whatsapp-24.png" %}' alt="Whatsapp" />
          </a>
          <a
            href="#"
            data-toggle="tooltip"
            data-placement="top"
            title="Quick view"
            class="preview d-md-flex align-items-center justify-content-center cursor-pointer text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mb-2 d-none"
          >
            <span data-toggle="modal" data-target="#quick-view">
              <svg class="icon icon-eye-light fs-24">
                <use xlink:href="#icon-eye-light"></use>
              </svg>
            </span>
          </a>
        </div>
      </div>
    </div>
    <div class="card-body pt-4 text-center px-0">
      <!-- <p class="card-text font-weight-bold fs-16 mb-1 mx-auto text-secondary w-75">
        <span>RS. {{ i.price }}</span>
      </p> -->
      <h2 class="card-title fs-15 font-weight-500 mx-auto mb-2 w-75">
        <a href="#">{{ i.name }}</a>
      </h2>
      <div class="d-flex align-items-center justify-content-center flex-wrap">
        <span class="card-text fs-14 font-weight-400 pl-2 lh-1 w-75"
          >{{ i.small_description }}</span
        >
      </div>
      <!-- <div class="d-flex align-items-center justify-content-center flex-wrap">
        <span class="card-text fs-14 font-weight-400 pl-2 lh-1 w-75"
          >{{ i.detail_description }}</span
        >
      </div> -->
    </div>
  </div>
</div>
{% endfor %}