{% set firstImage = block.firstImage.one() %}
{% set secondImage = block.secondImage.one() %}

{% if firstImage or secondImage %}
<section class="py-m">
    <div class="container">
        <div class="grid gap-l lg:grid-cols-2">
            {% if firstImage %}
            <figure class="flex flex-col gap-s">
                <img src="{{ firstImage.getUrl({ width: 900 }) }}" alt="{{ firstImage.alt ?: firstImage.title }}"
                    class="aspect-4/3 w-full rounded-sm object-cover">
                {% if block.firstImageCaption %}
                <figcaption class="font-rosario text--2 text-black">{{ block.firstImageCaption }}</figcaption>
                {% endif %}
            </figure>
            {% endif %}

            {% if secondImage %}
            <figure class="flex flex-col gap-s">
                <img src="{{ secondImage.getUrl({ width: 900 }) }}" alt="{{ secondImage.alt ?: secondImage.title }}"
                    class="aspect-4/3 w-full rounded-sm object-cover">
                {% if block.secondImageCaption %}
                <figcaption class="font-rosario text--2 text-black">{{ block.secondImageCaption }}</figcaption>
                {% endif %}
            </figure>
            {% endif %}
        </div>
    </div>
</section>
{% endif %}