<div class="overflow-x-scroll whitespace-nowrap md:max-w-[689px] hidden-scrollbar -mx-4 mb-6">
    {% for item in section.content %}
    <div class="inline-block align-top m-0">
        <a href="{{item.url}}" data-caption="{{item.caption}}" class="fancybox relative text-white h-48 w-44 md:w-56 md:h-56 block" data-fancybox="gallery_compare_{{section.id}}" title="Ingrandisci immagine">
            <img class="gallery_image_mobile h-48 w-44 md:w-56 md:h-56 object-cover" loading="lazy" fetchpriority="low" src="{{item.url}}?w=200&h=180" alt="Galleria immagini"/>
            {% if item.caption %}
            <div class="absolute bottom-0 left-0 w-full h-6 flex items-center justify-center bg-black/50 text-white"><span class="text-xs text-slate-300 group-hover:text-white">{{ item.caption }}</span></div>
            {% endif %}
        </a>
    </div>
    {% endfor %}
</div>


