<section class="generic-hero-panel w-full relative bg-brand-terracotta-aa">
    <div class="container-wrapper max-w-7xl mx-auto">
        <div class="padding-wrapper sm:px-8 lg:px-10 sm:py-10 lg:py-12">
            <div class="grid-wrapper w-full flex flex-col justify-start items-start md:items-center md:grid md:grid-cols-12 md:gap-6">
                <div class="left-wrapper w-full flex flex-col justify-start items-start md:col-span-6 lg:col-span-5">
                    <div class="padding-wrapper w-full flex flex-col justify-start items-start px-6 sm:px-8 md:px-0 py-10 sm:py-12 lg:py-16">
                        <div class="content-wrapper w-full flex flex-col justify-center md:justify-start items-center md:items-start">
                            <h1 class="homepage-title w-full text-center md:text-left font-header text-white-pure font-bold text-4xl lg:text-5xl">
                                {{ panel.header }}
                            </h1>
                            <p class="homepage-body w-full max-w-[16rem] lg:max-w-[18rem] text-center md:text-left font-body text-white-primary text-lg lg:text-xl mt-6 lg:mt-8">
                                {{ panel.subheader }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="right-wrapper w-full h-full flex flex-col justify-start items-start md:col-span-6 lg:col-span-7">
                    <div class="image-wrapper w-full sm:h-full relative sm:rounded-xl lg:rounded-2xl overflow-hidden">
                        {% for image in panel.heroImage.all() %}
                            {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                {
                                    'lazyLoad': 'false',
                                    'imgStyles': '!w-full !h-full !object-cover !object-center'
                                }
                            %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>