{% set fallbackLinkText = false %}
{% if teaser|default(null) and teaser.getPage()|default(null) %}
<div class="col">
<a href="{{ teaser.getPage().getFullPath() }}" class="card border-secondary card-w-image">
{% if teaser.getTeaserImage() %}
<div class="overflow-zoom bg-gray2">{{ teaser.getTeaserImage().getThumbnail('card-teaser-image'~(teaser.getTeaserImage().getMimetype() == 'image/png' ? '-png' : '')).getHtml({imgAttributes:{class:'card-img-top img-fluid'}})|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">
<div class="text-uppercase text-right clearfix">
{% for category in teaser.getTeaserCategories() %}
{% if not fallbackLinkText and category.getLinkText() %}
{% set fallbackLinkText = category.getLinkText() %}
{% endif %}
<span class="mark text-white text-left float-left">{{ category.getName() }}</span>
{% endfor %}
</div>
<h3 class="card-title">{{ teaser.getTitle() }}</h3>
{#<div class="card-text">{{ teaser.getDescription() }}</div>#}
</div>
<div class="card-footer card-text">
{% if not fallbackLinkText %}
{% set fallbackLinkText = 'teaser.news.read-more'|trans %}
{% endif %}
<span class="lorch-icon lorch-icon-next">{{ teaser.getLinkText()|default(fallbackLinkText) }}</span>
</div>
</a>
</div>
{% endif %}