{# different format if in slice or in index list page (no contentProperties in index) #}
{% set imgCondition = federation.image.singleMedia is defined and federation.image.singleMedia.publicId is not null %}
{% if federation.contentProperties is defined %}
{% set imgCondition = federation.contentProperties.image.singleMedia is defined and federation.contentProperties.image.singleMedia.publicId is not null %}
{% endif %}
<button class="card card-federation" js-dynamic-modal="{route: '/ajax/modal', id:'{{ federation.id }}', position: 'aside-modal', model: 'federation-modal'}">
<div class="visual__wrapper relative">
{% if imgCondition %}
{% set image = federation.contentProperties is defined ? federation.contentProperties.image.singleMedia : federation.image.singleMedia %}
<img class="abs-center lazyload"
data-src="{{ cloudinary_media(image, 'f_auto,q_auto,c_limit,w_500') }}"
alt="{{ image.alt }}">
{% else %}
<img class="abs-center is-logo lazyload"
data-src="/assets/front/federation-default.svg"
alt="">
{% endif %}
</div>
<p class="name text-violet font-weight-light text-center mt-4">{{ federation.title }}</p>
{% if federation.contentProperties is defined and federation.contentProperties.subTitle is defined and federation.contentProperties.subTitle is not null or federation.subTitle is defined and federation.subTitle is not null %}
<p class="description text-violet-dark font-weight-semibold text-center mt-2">{{ federation.contentProperties is defined ? federation.contentProperties.subTitle : federation.subTitle }}</p>
{% endif %}
</button>