<section class="home-header-panel w-full relative">
    <div class="container-wrapper max-w-none mx-auto">
        <div class="padding-wrapper p-0">
            <div class="content-wrapper w-full flex flex-col justify-start items-start">
                {% if panel.headerImage | length %}
                    <div class="image-wrapper w-full h-56 xs:h-64 sm:h-72 lg:h-80 xl:h-96 2xl:h-120 3xl:h-[40rem] flex flex-col justify-start items-start">
                        {% for image in panel.headerImage.all() %}
                            {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                {
                                    'lazyLoad': 'false',
                                    'imgStyles': '!w-full !h-full !object-cover !object-center'
                                }
                            %}
                        {% endfor %}
                    </div>
                {% endif %}
                {% if entry.homeType | length or ( entry.homeAvailability | length and not ( entry.homeAvailability == 'default' )) %}
                    <div class="categories-wrapper w-full relative h-0 max-h-0 flex flex-row justify-center items-center">
                        <div class="items-wrapper flex flex-row justify-center items-center rounded-full p-1{{ entry.homeType | length ? ' bg-white-primary' : ' bg-brand-terracotta-i' }}">
                            {% if entry.homeType | length %}
                                <span class="font-body text-sm lg:text-base rounded-full px-4 py-2 lg:px-6">
                                    {{ entry.homeType }}
                                </span>
                            {% endif %}
                            {% if entry.homeAvailability | length %}
                                {% if not ( entry.homeAvailability == 'default' ) %}
                                    <span class="font-body text-sm lg:text-base bg-brand-terracotta-aa text-white-pure rounded-full px-4 py-2 lg:px-6">
                                        {{ entry.homeAvailability.label }}
                                    </span>
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
                <div class="header-wrapper w-full flex flex-col justify-start items-start bg-brand-terracotta-aa">
                    <div class="padding-wrapper w-full px-6 sm:px-8 lg:px-10 py-8 sm:py-10 lg:py-12 xl:py-16{{ entry.homeCategory | length or entry.homeAvailability | length ? ' pt-12 sm:pt-14 lg:pt-16' }}">
                        <div class="content-wrapper w-full flex flex-col justify-center items-center">
                            <h1 class="w-full text-center font-header text-white-pure font-bold text-4xl lg:text-5xl">
                                {{ panel.header }}
                            </h1>
                            {% if panel.paragraph | length %}
                                <div class="wysiwyg font-body text-center prose lg:prose-lg prose-invert text-white mt-6 sm:mt-8 lg:mt-10">
                                    {{ panel.paragraph }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>