<section class="homepage-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">
                                A Forever Home
                            </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">
                                Where NDIS Participants can live independently for the long term
                            </p>
                        </div>
                        <div class="search-wrapper w-full flex flex-col justify-center md:justify-start items-center md:items-start mt-8 sm:mt-10 lg:mt-12">
                            {# The search bar #}
                            <form id="homepageForm" class="w-full relative rounded-full max-w-[24rem] md:max-w-[20rem] lg:max-w-[22rem]" action="/search?query=&page=1&filter=all" method="post">
                                <label class="sr-only" for="homepageInput">Search</label>
                                <input id="homepageInput" value="" type="search" placeholder="What are you looking for?" class="bg-white-primary w-full h-14 sm:h-16 pl-6 sm:pl-8 font-body font-normal text-lg text-black-primary placeholder:text-gray-400 border-2 border-solid border-brand-terracotta-aaa rounded-full transition-colors duration-300 placeholder:transition-colors placeholder:duration-300 active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2" />
                                <button id="homepageSubmit" class="homepage-search-submit absolute top-2 right-2 w-10 sm:w-12 h-10 sm:h-12 flex justify-center items-center rounded-full bg-brand-terracotta-aa" type="submit">
                                    {{ svg(svgPath ~ '/core/search-icon-thick.svg') | attr({ class: 'w-4 sm:w-5 text-white-pure' }) }}
                                </button>
                            </form>
                        </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">
                        <div class="background-wrapper w-full h-[calc(100%-1rem)] sm:h-[calc(100%-1.5rem)] absolute inset-x-0 bottom-0 bg-brand-terracotta-i sm:rounded-xl lg:rounded-2xl"></div>
                        <img src="{{ staticImagesUrl }}webp/habilitas-home-hero-banner.png.webp" alt="" class="w-full relative h-full object-cover object-bottom" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>