{% set medias = this.medias %}

{% if medias|length > 0 %}
    <section {{ attributes.defaults({ class: 'w-full' }) }}>
        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
            {% for media in medias %}
                {% set media_type = media.media_type|default('') %}
                {% set image_url = media_type == 'VIDEO' ? media.thumbnail_url|default(null) : media.media_url|default(null) %}
                {% set caption = media.caption|default('')|striptags|trim %}

                {% if image_url and media.permalink|default(null) %}
                    <a
                        href="{{ media.permalink }}"
                        class="group relative block aspect-square overflow-hidden bg-surface text-inherit"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <img
                            src="{{ image_url }}"
                            alt="{{ caption ?: 'instagram.media_alt'|trans }}"
                            class="block size-full object-cover transition-transform duration-300 ease-out group-hover:scale-105 group-focus-visible:scale-105 motion-reduce:transition-none"
                            loading="lazy"
                        >
                        <span
                            class="pointer-events-none absolute inset-x-0 bottom-0 h-[58%] bg-gradient-to-b from-black/0 to-black/80 md:opacity-0 md:transition-opacity md:duration-200 md:ease-out md:group-hover:opacity-100 md:group-focus-visible:opacity-100 motion-reduce:transition-none"
                            aria-hidden="true"
                        ></span>
                        {% if caption %}
                            <span class="pointer-events-none absolute inset-x-0 bottom-0 z-10 block p-3 font-sans text-sm leading-snug text-white [text-wrap:pretty] md:translate-y-2 md:opacity-0 md:transition md:duration-200 md:ease-out md:group-hover:translate-y-0 md:group-hover:opacity-100 md:group-focus-visible:translate-y-0 md:group-focus-visible:opacity-100 motion-reduce:transition-none">
                                {{ caption }}
                            </span>
                        {% endif %}
                        {% if media_type == 'VIDEO' %}
                            <span class="absolute right-2 top-2 z-20 bg-black/70 px-2 py-1 text-xs uppercase leading-none tracking-[0.08em] text-white" aria-label="{{ 'instagram.video_label'|trans }}">
                                {{ 'instagram.video_label'|trans }}
                            </span>
                        {% endif %}
                    </a>
                {% endif %}
            {% endfor %}
        </div>
    </section>
{% endif %}
