{% set file_references = file_references | selectattr('file', 'public') | list %}
{% if file_references %}
    <div class="container">
        <div class="media row row-cols-md-2 row-cols-lg-3 row-cols-xxl-4">
            {% for file_reference in file_references %}
                <div class="col media-file mt-3 position-relative">
                    {% if file_reference.file.media_type is image_media_type_supported %}
                        <figure>
                            <picture>
                                <source srcset="{{ file_reference | image_resize_cover((900, 900)) | url }}" media="(min-width: 500px)">
                                <img src="{{ file_reference | image_resize_cover((500, 500)) | url }}" alt="{{ file_reference.file.label | localize }}" class="image" loading="lazy">
                            </picture>
                            <figcaption class="mt-1 small text-truncate">{{ file_reference.file.label | localize | html_lang }}</figcaption>
                        </figure>
                    {% else %}
                        <p class="small">{{ file_reference.file.label | localize | html_lang }}</p>
                    {% endif %}
                    <a href="{{ file_reference.file | url }}" class="stretched-link"><span class="visually-hidden">View {{ file_reference.file.label | localize | html_lang }}</span></a>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}
