{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
<div class="cards">
    {%- for page in show_pages %}
        {# Determine which URL to use, default is page.permalink #}
        {%- if page.extra.link_to and config.markdown.external_links_target_blank -%}
            {%- set blank_target = "target=_blank" -%}
        {%- else -%}
            {%- set blank_target = "" -%}
        {%- endif -%}

        {% set target_url = page.extra.link_to | default(value=page.permalink) %}

        <a rel="{{ rel_attributes }}" {{ blank_target }} href="{{ target_url }}" class="card">
            <div>
                {% if page.extra.local_image %}
                    {% set meta = get_image_metadata(path=page.extra.local_image, allow_missing=true) %}
                    <img class="card-image" alt="{{ page.extra.local_image }}" src="{{ get_url(path=page.extra.local_image) }}" {% if meta.width %}width="{{ meta.width }}" {% endif %} {% if meta.height %}height="{{ meta.height }}" {% endif %}>
                {% elif page.extra.remote_image %}
                    <img class="card-image" alt="{{ page.extra.remote_image }}" src="{{ page.extra.remote_image }}">
                {% else %}
                    <div class="card-image-placeholder"></div>
                {% endif %}

                <div class="card-info">
                    <h2 class="card-title">{{ page.title }}</h2>
                    <div class="card-description">
                        {% if page.description %}
                            {{ page.description }}
                        {% endif %}
                    </div>
                </div>
            </div>
        </a>
    {% endfor -%}
</div>