<section class="generic-location-panel w-full relative">
    <div class="container-wrapper max-w-7xl mx-auto">
        <div class="grid-wrapper w-full flex flex-col sm:flex-row justify-start sm:justify-between items-start sm:items-start flex-wrap">
            <div aria-hidden="true" class="home-details-wrapper hidden sr-only">
                {% for address in panel.addresses %}
                    <div class="address-item" data-title="{{ address.header }}" data-address="{{ address.address ?? '' }}" data-lat="{{ address.latitude ?? '' }}" data-lng="{{ address.longitude ?? '' }}" data-zoom="14"></div>
                {% endfor %}
            </div>
            <div class="map-wrapper w-full relative sm:order-last lg:rounded-2xl xl:rounded-3xl overflow-hidden bg-mintyy-gray-i lg:mx-10 lg:mb-12">
                <div class="primary-map w-full flex justify-center items-center h-64 xs:h-72 sm:h-96 lg:h-120 xl:h-160 2xl:h-[40rem] 3xl:h-[42rem] 4xl:h-[45rem] 5xl:h-[50rem] lg:rounded-2xl xl:rounded-3xl overflow-hidden">
                    {{ svg(svgPath ~ 'animated/loading-icon-animated.svg') | attr({class: "w-4 h-4 mr-4 text-brand-terracotta-i fill-current pointer-events-none"}) }}
                </div>
            </div>
            <div class="header-wrapper w-full sm:w-auto relative">
                <div class="padding-wrapper px-6 sm:px-8 lg:px-10 py-8 sm:py-10 lg:py-12">
                    <div class="content-wrapper w-full sm:w-auto flex flex-col lg:flex-row justify-start items-start">
                        <h2 class="min-w-max font-body text-brand-terracotta-aa font-semibold text-3xl lg:text-4xl">
                            {{ panel.header }}
                        </h2>
                        {% if panel.addresses | length %}
                            <div class="locations-wrapper w-full sm:w-auto flex flex-col justify-start items-start mt-6 sm:mt-8 lg:mt-1 lg:mx-16 xl:mx-32">
                                {% for address in panel.addresses %}
                                    <div class="address-wrapper w-full sm:w-auto flex flex-col justify-start items-start first:mt-0 mt-4 lg:mt-6">
                                        <span class="font-body font-semibold text-sm lg:text-base text-brand-gray-i uppercase tracking-wide">
                                            {{ address.header }}
                                        </span>
                                        <span class="font-body lg:text-lg text-brand-gray-i mt-2 lg:mt-3">
                                            {{ address.address }}
                                        </span>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% if panel.buttons | length and panel.buttons[0].buttonText | length %}
                <div class="buttons-wrapper w-full sm:w-auto flex flex-row justify-start items-start">
                    <div class="padding-wrapper w-full sm:w-auto p-6 pt-0 sm:p-8 lg:p-10">
                        {% for button in panel.buttons %}
                            {% include themeDir ~ '/_includes/_modules/_button' with {
                                'buttonType': 'external-link',
                                'buttonText': button.buttonText,
                                'href': button.buttonLink,
                                'title': button.buttonText,
                                'theme': 'primary',
                                'newTab': button.newTab,
                                'addClasses': '!w-full sm:!w-auto'
                            } %}
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</section>