<div class="module module-pictureslist module-{{ module.id }} {{ module.customClass }}">
    {% if module.params.title is not empty and module.params.title_tag is not empty %}
        <{{ module.params.title_tag }} class="module-title">
            {{ module.params.title }}
        </{{ module.params.title_tag }}>
    {% endif %}

    {% if medias is not empty %}
        <div class="list-items">
            <article class="item text-center">
                <figure>
                    <a data-fancybox-manual rel="gallery{{ module.id }}" href="#" title="{{ medias[0].title }}">
                        <img alt="{{ medias[0].title }}" class="img-fluid" src="{{ asset(medias[0].getWebPathPicture()|imagine_filter('500L')) }}">
                    </a>
                </figure>
            </article>
        </div>
        
        {% if module.params.btn_text %}
        <p class="module-more-actions text-center">
            <a class="btn btn-alabaster" data-fancybox-manual rel="gallery{{ module.id }}" href="#">
                {{ module.params.btn_text }}
            </a>
        </p>
        {% endif %}
    {% endif %}
</div>
<script>
    var gallery{{ module.id }} = [
        {% for media in medias %}
            {{ include('Front/Render/Module/PicturesList/_item.picture.featured.html.twig') }}
            {% if loop.last == false %}
            ,
            {% endif %}
        {% endfor %}
    ];
</script>