<a class="card border-secondary card-w-image"
href="{{ pimcore_url({object: product.productObject, document: document}) }}">
{% if product.image is not null %}
<div class="overflow-zoom bg-gray2">
{{ product.image.getThumbnail('product-teaser-image').getHtml({imgAttributes:{class:'card-img-top img-fluid product-teaser-image'}})|raw }}
</div>
{% else %}
<div class="card-img-top bg-gray2">
<div class="embed-responsive embed-responsive-16by9">
<img src="/_gfx/placeholder-camera-16by9.png" class="embed-responsive-item img-fluid mt-0" alt="no-image">
</div>
</div>
{% endif %}
<div class="card-body">
{% if product.technology is not empty %}
<div class="text-uppercase text-right clearfix">
<span
class="mark text-white float-left">{{ product.technology | upper }}
</span>
<small></small>
</div>
{% endif %}
<h3 class="card-title">
{{ product.name }}
</h3>
<div
class="wysiwyg check-list">
<ul>
{% for item in product.details %}
<li class="pr-3">{{ item }}</li>
{% endfor %}
</ul>
</div>
</div>
<div class="card-footer card-text">
<span class="lorch-icon-next lorch-icon">
{{ 'product-details.products.read-more' | trans }}
</span>
</div>
</a>