<!--<div class="column is-3 product-list-item">-->
<!--                <div class="box">-->
<!--                    <figure class="image is-4by3 mb-4">-->
<!--                        <img src="{{ product.get_thumbnail }}" alt="{{product.title}}">-->
<!--                    </figure>-->

<!--                    <h2 class="subtitle">{{product.title}}</h2>-->

<!--                    <h3 class="price is-size-6 mb-5">${{product.price}}</h3>-->

<!--                    <hr>-->

<!--                    <a href="{% url 'product:product' product.category.slug product.slug %}" class="button is-danger is-uppercase">View</a>-->
<!--                </div>-->
<!--new-->

  <div class="product-card">
        <div class="product-tumb">
            <img src="{{ product.get_thumbnail }}">
        </div>
        <div class="product-details">
            <h4><a style="color: white;" href="{% url 'product:product' product.category.slug product.slug %}">{{product.title}}</a></h4>
            <div class="product-bottom-details">
                <div style="color: white;" class="product-price">${{product.price}}</div>
                <div class="product-links">
                    <a style="color: white;" href="{% url 'product:product' product.category.slug product.slug %}">View</a>
                </div>
            </div>
        </div>
    </div>
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
{% endblock scripts %}

<!--<div class="container mt-5">-->
<!--      <div class="card" style="width: 18rem;">-->
<!--        <img src="{{ product.get_thumbnail }}" class="card-img-top" alt="...">-->
<!--        <div class="card-body">-->
<!--          <h5 class="card-title">{{product.title}}</h5>-->
<!--        </div>-->
<!--        <ul class="list-group list-group-flush">-->
<!--          <li class="list-group-item">${{product.price}}</li>-->
<!--        </ul>-->
<!--        <div class="card-body">-->
<!--          <a href="{% url 'product:product' product.category.slug product.slug %}" class="card-link">View Product</a>-->
<!--        </div>-->
<!--      </div>-->
<!--</div>-->

<!--</div>-->