{#
  Home wall: two picture blocks per row (responsive → one column), title + category on image overlay.
#}
{% if tiles is not empty %}
    <div
        class="featured-list featured-list--wall featured-list--picture-grid{{ wall_extra_class|default('') != '' ? ' ' ~ wall_extra_class : '' }}"
        role="region"
        aria-label="{{ (region_aria_label|default(website_name ~ ' — featured articles'))|e('html_attr') }}"
    >
        {% do prefetch_article_card_covers(tiles) %}
        {% for tile in tiles %}
            {% set _hue = (tile.categoryTitle|default('x')|length * 47) % 360 %}
            {% set item = tile.article %}
            {% set article_href = (item.pubkey and npub_from_hex(item.pubkey) != '') ? path('article', { npub: npub_from_hex(item.pubkey), slug: item.slug }) : path('article-legacy-redirect', { slug: item.slug }) %}
            <article class="featured-tile featured-tile--picture-block" style="--tile-hue: {{ _hue }};">
                <a
                    class="featured-tile__link featured-tile__link--picture"
                    href="{{ article_href }}"
                    aria-label="{{ (item.title ~ ' — ' ~ tile.categoryTitle)|e('html_attr') }}"
                >
                    {% set _no_cover = item.image|default('')|trim == '' %}
                    <div class="featured-tile__picture{{ _no_cover ? ' card-header--no-cover' : '' }}">
                        <img
                            class="featured-tile__picture-img"
                            src="{{ article_card_cover(item.image, item.pubkey) }}"
                            alt=""
                            loading="lazy"
                            decoding="async"
                        >
                        <div class="featured-tile__picture-scrim" aria-hidden="true"></div>
                        <div class="featured-tile__picture-overlay">
                            <span class="featured-tile__picture-cat">{{ tile.categoryTitle|e }}</span>
                            <h2 class="featured-tile__picture-title">{{ item.title|e }}</h2>
                        </div>
                    </div>
                </a>
            </article>
        {% endfor %}
    </div>
{% endif %}