{% macro tag(tag) %}
  {% if tag %}
    {% if tag.feature_image %}
      <img
        src="{{ tag.feature_image }}"
        alt="{{ tag.name }}"
        class="h-6 w-6 rounded-full object-cover border border-stone-300 flex-shrink-0"
      >
    {% else %}
      <div class="h-6 w-6 rounded-full bg-stone-200 text-stone-600 text-[10px] font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0">
        {{ tag.name[:1] }}
      </div>
    {% endif %}

    <span class="inline-block rounded-full bg-stone-100 text-stone-600 px-2 py-1 text-sm font-medium border border-stone-200">
      {{ tag.name }}
    </span>
  {% endif %}
{% endmacro %}