{% load static %}
{% load thumbnail %}
<div class="card h-100" >
  <div class="card-header text-truncate">{{item.title}}</div>
  <div class="card-body p-0">
    <img src="{{ item.main_image.image|thumbnail_url:'image_40_60' }}" class="d-block d-sm-none img-fluid rounded mx-auto" alt="{{item.title}}">

    <img src="{{ item.main_image.image|thumbnail_url:'image_60_90' }}" class="d-none d-sm-block d-md-none img-fluid rounded mx-auto" alt="{{item.title}}">

    <img src="{{ item.main_image.image|thumbnail_url:'image_80_120' }}" class="d-none d-md-block d-lg-none img-fluid rounded mx-auto" alt="{{item.title}}">
    
    <img src="{{ item.main_image.image|thumbnail_url:'image_120_180' }}" class="d-none d-lg-block d-xl-none img-fluid rounded mx-auto" alt="{{item.title}}">

    <img src="{{ item.main_image.image|thumbnail_url:'image_160_240' }}" class="d-none d-xl-block img-fluid rounded mx-auto" alt="{{item.title}}">
  </div>
  <div class="card-footer row d-flex m-0">
    <div class="col text-center">
          <a href="{% url 'product-configure' item.id %}" class="btn btn-primary">Konfiguruj</a>
    </div>
  </div>
</div>
