<div class="title-wrapper w-full flex flex-col justify-start items-start">
    <div class="padding-wrapper w-full px-6 py-8 sm:p-0 flex flex-col justify-start sm:justify-center items-start sm:items-center">
        {% if searchQuery | length %}
            {% if hasResults %}
                <h2 class="font-body text-3xl lg:text-4xl text-brand-terracotta-aa">
                    <span>{{ totalResults | length }}</span>
                    <span>result{{ totalResults | length > 1 ? 's' : '' }} for</span>
                    <span>"{{ searchQuery }}"</span>
                </h2>
                {% if not totalResults | length > 0 %}
                    <p class="font-body lg:text-lg text-black-primary mt-4 lg:mt-6">Sorry, we couldn't find anything matching your search query.</p>
                {% endif %}
            {% else %}
                <h2 class="font-body text-3xl lg:text-4xl text-brand-terracotta-aa">
                    <span>Sorry</span>
                </h2>
                <p class="font-body lg:text-lg text-black-primary mt-4 lg:mt-6">We couldn't find anything matching your search query.</p>
            {% endif %}
        {% else %}
            <h2 class="font-body text-3xl lg:text-4xl text-brand-terracotta-aa">
                All results
            </h2>
            {% if not totalResults | length > 0 %}
                <p class="font-body lg:text-lg text-black-primary mt-4 lg:mt-6">Sorry, we couldn't find anything matching your search query and filter.</p>
            {% endif %}
        {% endif %}
    </div>
</div>