<a href="mailto:{{contact.email}}" class="card card-contact {{addedClass}}">
<div class="card__visual relative w-full round bg-grey-light shrink-0">
{% if contact.image.singleMedia is defined and contact.image.singleMedia.publicId is not null %}
<picture>
<source media="(max-width: 420px)" data-srcset="{{ cloudinary_media(contact.image.singleMedia, 'f_auto,q_auto,g_face,c_fill,w_104,h_104') }} 1x, {{ cloudinary_media(contact.image.singleMedia, 'f_auto,q_auto,g_face,c_fill,w_104,h_104,dpr_2') }} 2x">
<source media="(min-width: 421px)" data-srcset="{{ cloudinary_media(contact.image.singleMedia, 'f_auto,q_auto,g_face,c_fill,w_275,h_275') }} 1x, {{ cloudinary_media(contact.image.singleMedia, 'f_auto,q_auto,g_face,c_fill,w_275,h_275,dpr_2') }} 2x">
<img class="abs-center w-full round lazyload"
data-src="{{ cloudinary_media(contact.image.singleMedia, 'f_auto,q_auto,g_face,c_fill,w_275,h_275') }}"
alt="{{ contact.image.singleMedia.alt }}">
</picture>
{% else %}
<img class="abs-center is-logo lazyload"
data-src="/assets/front/federation-default.svg"
alt="">
{% endif %}
<div class="picto round bg-orange absolute top-0 right-0">
<svg width="13" height="14" class="icon icon--white abs-center" aria-hidden="true">
<use href="#icon-mail" xlink:href="#icon-mail"></use>
</svg>
</div>
</div>
<div class="card__content text-violet-dark">
<p class="name font-weight-xbold">{{ contact.name }}</p>
<p class="job font-weight-medium mt-1 md:mt-2">{{ contact.job }}</p>
</div>
</a>