<section class="home-stats-panel w-full relative">
    <div class="container-wrapper max-w-7xl mx-auto">
        <div class="padding-wrapper px-6 sm:px-8 lg:px-10 py-8 sm:py-10 lg:py-12">
            {% if ( panel.header | length ) or ( panel.paragraph | length ) %}
                <div class="title-wrapper w-full flex flex-col justify-center items-center mb-8 sm:mb-10 lg:mb-12 xl:mb-16">
                    {% if panel.header | length %}
                        <h2 class="font-header text-center text-brand-terracotta-aa font-semibold text-3xl lg:text-4xl">
                            {{ panel.header }}
                        </h2>
                    {% endif %}
                    {% if panel.paragraph | length %}
                        <div class="wysiwyg font-body prose max-w-none lg:prose-lg{{ panel.header | length ? ' mt-3 lg:mt-4' : '' }}">
                            {{ panel.paragraph }}
                        </div>
                    {% endif %}
                </div>
            {% endif %}
            <div class="content-wrapper w-full flex flex-col sm:flex-row justify-start items-start gap-2 sm:gap-6 lg:gap-10 xl:gap-x-20">
                {% for column in panel.columns %}
                    <div class="col-wrapper w-full flex flex-col justify-start items-start gap-2 sm:gap-4 lg:gap-6 xl:gap-x-8">
                        {% for stat in column.statistics %}
                            <div class="stat-wrapper w-full flex flex-row justify-between items-start gap-4 sm:gap-6 lg:gap-8 border-solid border-b border-mintyy-gray-iv overflow-hidden">
                                <div class="title-wrapper w-auto max-w-full flex flex-row justify-start items-start flex-grow min-w-min p-4 sm:px-0 sm:py-6 lg:py-8">
                                    <span class="font-body max-w-full text-base lg:text-lg font-medium text-brand-gray-i block truncate sm:whitespace-normal">
                                        {{ stat.title }}
                                    </span>
                                </div>
                                <div class="stat-wrapper w-auto max-w-full flex flex-row justify-end items-start flex-grow min-w-0 p-4 sm:px-0 sm:py-6 lg:py-8">
                                    <span class="font-body max-w-full text-base lg:text-lg text-brand-black text-right block truncate sm:whitespace-normal">
                                        {{ stat.stat }}
                                    </span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>