<div class="flex gap-4 items-center">
    {% if value.3 and value.3.path %}
        <div class="bg-center bg-cover bg-white border flex font-medium h-8 w-8 dark:bg-gray-900 dark:border-gray-700 {% if value.3.squared %}rounded-sm{% else %}rounded-full{% endif %}" style="background-image: url('{{ value.3.path }}')">
        </div>
    {% elif value.2 %}
        <div class="bg-white border flex font-medium h-8 justify-center items-center rounded-full text-xs uppercase w-8 dark:bg-gray-900 dark:border-gray-700">
            {{ value.2 }}
        </div>
    {% endif %}

    <div class="flex flex-col text-right lg:text-left">
        <h3>{{ value.0 }}</h3>

        {% if value.1 %}
            <p class="text-gray-500">
                {{ value.1 }}
            </p>
        {% endif %}
    </div>
</div>
