{% macro cards_pages(pages) %}

<div class="cards">
    {%- for page in pages %}
    <div class="card">
        {% if page.extra.link_to %}
            <a rel="noopener noreferrer" target="_blank" href={{ page.extra.link_to }}>
        {% endif %}
        {% if page.extra.local_image %}
            {% set meta = get_image_metadata(path=page.extra.local_image) %}
            <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 %}
        {% if page.extra.link_to %}
            </a>
        {% endif %}

        <div class="card-info">
            <h1 class="card-title">
                {% if page.extra.link_to %}
                    <a rel="noopener noreferrer" target="_blank" href={{ page.extra.link_to }}>{{page.title}}</a>
                {% else %}
                    <a href={{ page.permalink }}>{{page.title}}</a>
                {% endif %}
            </h1>

            <div class="card-description">
                {% if page.description %}
                    {{ page.description }}
                {% endif %}
            </div>
        </div>
    </div>

    {% endfor -%}
</div>

{% endmacro cards_pages %}