{% for file_reference in file_references | selectattr('file', 'public') %}
    <div class="col media-file mt-3 position-relative">
        {% if file_reference.file.media_type is image_supported_media_type %}
            <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 %}
