<section class="maintenance-hero-panel bg-brand-terracotta-aa relative w-full">
    <div class="container-wrapper max-w-5xl 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:justify-center md:items-center">
                <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 items-center">
                            {% if maintenanceHeading | length or maintenanceDescription | length %}
                                {% if maintenanceHeading | length %}
                                    <h1 class="text-white-pure text-center text-4xl lg:text-5xl font-header font-semibold lg:max-w-96">
                                        {{ maintenanceHeading }}
                                    </h1>
                                {% endif %}
                                {% if maintenanceDescription | length %}
                                    <span class="text-white text-center text-lg lg:text-xl font-body font-regular mt-4 lg:mt-8">
                                            {{ maintenanceDescription }}
                                        </span>
                                {% endif %}
                            {% endif %}
                        </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 md:h-full bg-brand-terracotta-i relative rounded-t-3xl sm:rounded-3xl lg:rounded-t-4xl overflow-hidden">
                        <div class="individual-images-wrapper w-full md:h-full grid grid-cols-3 justify-center items-center gap-2 p-2 lg:gap-3 lg:p-3">
                            <img src="{{ staticImagesUrl }}webp/404/404-hero-image-1.jpg.webp" alt="A photo of a woman sitting in a wheelchair with her arms extended to her sides, basking in the sunshine of a sunset on the beach." class="w-full relative h-full object-cover object-center rounded-tl-2xl sm:rounded-l-2xl" />
                            <img src="{{ staticImagesUrl }}webp/404/404-hero-image-2.jpg.webp" alt="A photo of a man with down syndrome wearing headphones and cooking in his kitchen, scraping vegetables into a pot." class="w-full relative h-full object-cover object-center" />
                            <img src="{{ staticImagesUrl }}webp/404/404-hero-image-3.jpg.webp" alt="A photo of a woman in a wheelchair with her carer and a golden retriever, sitting in her backyard with lush greenery around." class="w-full relative h-full object-cover object-center rounded-tr-2xl sm:rounded-r-2xl" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>