{% extends "@Contao/content_element/_base.html.twig" %}
{% use "@Contao/component/_rich_text.html.twig" %}

{% set attributes = attrs(attributes|default) %}
{% set text_attributes = attrs().addClass('prose dark:prose-invert lg:prose-lg') %}
{% set headline = headline|merge({
    'attributes': attrs(headline.attributes|default).addClass('text-center text-3xl font-bold')
}) %}

{% block content %}

    <div class="grid md:grid-cols-12 md:gap-x-6 md:gap-y-12">

        <div class="md:col-start-2 md:col-span-8">
            {% with {text, attributes: text_attributes} %}{{ block('rich_text_component') }}{% endwith %}
        </div>

        <div class="md:col-start-2 md:col-span-10 space-y-6 md:space-y-0 md:flex md:space-x-12">
            {% for person in persons %}

                <div class="flex space-x-6 items-center">

                    <div class="rounded-xl w-20 h-20 md:h-28 md:w-28 overflow-hidden">
                        {{ figure_html(person.singleSRC, picture_config({
                            width: 400,
                            height: 400,
                            zoomLevel: 80,
                            resizeMode: 'crop',
                            densities: '1x, 2x'
                        })) }}
                    </div>

                    <div class="pb-4">
                        <p class="text-lg font-bold">{{ person.name }}</p>

                        {% if person.description|default %}
                            <p class="text-base text-gray-500 italic">{{ person.description }}</p>
                        {% endif %}
                    </div>

                </div>

            {% endfor %}
        </div>
    </div>

{% endblock %}
