{% load thumbnail %}
<div class="mb-6 flex items-center gap-x-6">
  {% if association.logo %}
    <div class="inline-flex aspect-square h-[64px] items-center justify-center rounded-md bg-white p-1">
      {% thumbnail association.logo "64x64" format="WEBP" upscale=False as img %}
        <img src="{{ img.url }}" width="{{ img.width }}" height="{{ img.height }}" alt="{{ association }}">
      {% endthumbnail %}
    </div>
  {% endif %}
  <a href="{% url "associations:detail" association.pk %}" class="text-lg leading-snug font-medium sm:text-xl hover:text-primary">
    {{ association.name }}
  </a>
</div>