{% set maxEntries = maxEntries is defined ? maxEntries : 8 %}
{% if connectedEntries | length >0 %}
<div class="title-block title-block--centered content-block container" >
<h2>{{ headline is defined ? headline : 'demi.connected-entries'|trans }}</h2>
</div>
<div class="justify-content-md-center row scrolling-row">
{% for index, entry in connectedEntries|slice(0,(maxEntries-1)) %}
{% if index is divisible by(4) %}
</div>
<div class="justify-content-md-center row scrolling-row">
{% endif %}
<div class="col-md-2 col-5 scrolling-row__item">
<section class="img-teaser stretch-link teaser-animation" {{ editmode ? 'style="max-width: 400px;"' : '' }}>
{% if entry['image'] is not empty %}
{% set description = getImageDescription(entry['image']) %}
{% endif %}
<div class="img-teaser__embed embed-responsive">
{% if entry['image'] is not empty %}
{{ entry['image'].getThumbnail('img-teaser').getHtml({
'imgAttributes': {
'class': 'js-lazy-img embed-responsive-item teaser-animation__img',
'title': description|default(''),
'alt': description|default('')}
}) | raw }}
{% endif %}
{% do jsConfig().add('lazyImg', true) %}
</div>
<div class="{{ editmode ? '' : 'img-teaser__content' }}">
<div>
<div class="flatrate-teaser__badge">{{ ("demi.connectedEntry." ~ entry['type'])|trans }}</div>
<h3 class="img-teaser__title h5">
<a class="stretch-link__link"
href="{{ entry['link'] }}">{{ entry['title']|raw }}</a>
</h3>
</div>
</div>
</section>
</div>
{% endfor %}
</div>
{% endif %}