{% set img_alt   = '' %}

{% if img_alt is not empty %}
    {% set img_alt = section.content.alt %}
    {% else %}
    {% set img_alt = 'ingrandisci immagine' %}
{% endif %}


{% set bg_color = theme.name == 'default' ? 'bg-[#A2CC20]' : 'bg-primary' %}

<div class="relative my-4 mt-12 -mx-4 lg:mx-0">
    <h2 class="text-xl {{bg_color}} text-white py-1 px-4 inline-block absolute -top-8 left-3 font-medium">{{section.content|raw}}</h2>
    <a class="block" href="{{section.imgUrl}}" title="{{section.content|raw}}" class="fancybox" data-fancybox-type="image">
        <img loading="lazy" fetchpriority="low" class="w-full rounded-lg mx-auto block shadow" src="{{section.imgUrl}}?w=660" width="660" alt="{{section.content|raw}}" data-src="{{section.imgUrl}}?w=660">
    </a>
</div>
