Footer: Variant 02

<footer class="n7-footer mt-auto{% if bgColor %} {{ bgColor }}{% endif %}{% if borderClasses %} {{ borderClasses }}{% endif %}{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
    {% block logosArea  %}
        {% if hasLogoArea %}
            {% render '@logos-area', { mainLogo: 'true', heading: 'Titolo sezione footer', logos: logos }, true %}
        {% endif %}
    {% endblock logosArea %}

    {% block navigationRow %}

    <div class="n7-footer__navigation-row grid gap-x-10 gap-y-4 md:flex n7-container md:px-5 py-6">
        {% block navigationRowContent %}
        <!-- Left block  -->
        <div class="flex flex-col gap-3 px-5 md:px-0 pb-4 md:pb-0 border-b md:border-b-0 n7-border-gray-01">
            <!-- Logo -->
            {% render '@logo',{ classes:'mb-1', width: '247', height: '80', alt: 'Img alt'}, true %}
            
            <!-- Info e contatti -->
            <address class="grid gap-3 n7-content-03 text-sm">
                <p>Indirizzo</p>
                <p>Email: <a class="n7-link n7-link--sm n7-link--underline text-current" href="mailto:email@email.com">email@email.com</a></p>
                <p>Pec: <a class="n7-link n7-link--sm n7-link--underline text-current" href="mailto:email@email.com">email@email.com</a></p>
                <p>Codice fiscale: 00000000000</p>
            </address>
        </div>

        <!-- Right block -->
        {% if navigationRow == 'extended' %}
        {# Three columns - To be implemented dynamic number of columns #}
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-x-14 gap-y-4 w-full px-5">
            <div class="basis-full md:basis-1/2 lg:basis-full">
                <nav aria-labelledby="footerMainNav01">
                    <h2 id="footerMainNav01" class="text-lg mb-4">Lorem ipsum</h2>
                    <ul class="flex flex-col gap-3">
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">Lorem ipsum dolor sit amet consectetur adipiscing elit</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                    </ul>
                <nav>
            </div>
            <div class="basis-full md:basis-1/2 lg:basis-full">
                <nav aria-labelledby="footerMainNav02">
                    <h2 id="footerMainNav02" class="text-lg mb-4">Lorem ipsum</h2>
                    <ul class="flex flex-col gap-3">
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">Lorem ipsum dolor sit amet consectetur adipiscing elit</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                    </ul>
                <nav>
            </div>
            <div class="basis-full md:basis-1/2 lg:basis-full">
                <nav aria-labelledby="footerMainNav03">
                    <h2 id="footerMainNav03" class="text-lg mb-4">Lorem ipsum</h2>
                    <ul class="flex flex-col gap-3">
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">Lorem ipsum dolor sit amet consectetur adipiscing elit</a>
                        </li>
                        <li>
                            <a href="" class="n7-link n7-content-03 text-sm">link</a>
                        </li>
                    </ul>
                <nav>
            </div>
            <div class="basis-full md:basis-1/2 lg:basis-full">
                <div class="flex flex-col gap-8">
                    <h2 class="text-lg">Titolo</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit proin bibendum ut purus vitae pharetra.</p>
                    {% render '@button', {label:'Link', href: '#' }, true %}
                </div>
            </div>
        </div>
        {% endif %}

        {% if navigationRow == 'minimal' %}
        <div class="grid gap-6 md:gap-3 md:justify-end md:flex-1">
            <!-- Menu footer  -->
            <nav class="pb-4 border-b md:border-b-0 n7-border-gray-01" aria-label="Contatti e segnalazioni">
                <ul class="flex gap-y-3 md:gap-y-4 flex-wrap">
                    {% for navItem in navItems %}
                    <li class="group md:border-r n7-border-gray-01 md:last:border-r-0">
                        <a href="" class="n7-link px-4 md:px-6 md:py-2 group:last:md:pr-0 text-sm md:text-md lg:text-lg n7-content-03">{{ navItem.label }}</a>
                    </li>
                    {% endfor %}
                </ul>
            </nav>

            <div class="md:text-right self-end grid gap-3 px-5 md:px-0">
                <p class="text-sm font-bold">Lorem ipsum dolor sit amet</p>
                <a href="" class="n7-link n7-link--sm text-sm md:justify-end">link.com {% render '@icon',{ id: 'mini--arrow-right-on-rectangle', size: 'w-4 h-4', classes: 'ml-1' }, true %}</a>
            </div>
        </div>
        {% endif %}
        {% endblock navigationRowContent %}
    </div>
    {% endblock navigationRow %}
    <!-- Footer bottom bar -->
    {% block bottomBar %}
        {% if hasBottomBar %}
            <div class="n7-footer__bottom-bar border-t n7-border-gray-01 px-2 md:px-5 py-6">
            
                <div class="{% block bottomBarContentClasses %}n7-container grid gap-6 md:flex items-center justify-between{% endblock bottomBarContentClasses %}">
                    
                    {% block bottomBarContentLeft %}
                    
                    <div class="n7-footer__bottom-bar-left">
                        <!-- Utilities and other -->
                        <nav aria-label="Utilità">
                            <ul class="flex gap-y-3 gap-x-5 md:gap-y-1 flex-wrap">
                                {% for bottomNavItem in bottomNavItems %}
                                    <li>
                                        <a href="" class="n7-link py-1 px-3 md:py-4 n7-content-03 text-xs md:text-sm md:text-md">{{ bottomNavItem.label }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </nav>
                    </div>
                    {% endblock bottomBarContentLeft %}

                    {% block bottomBarContentCenter %}

                    {% endblock bottomBarContentCenter %}

                    {% block bottomBarContentRight %}
                    <div class="n7-footer__bottom-bar-right px-2 md:px-0">
                        <!-- Logos -->
                        {% render '@logo',{ size: 'w-40 h-auto md:w-44 lg:w-[223px]', width: '223', height: '76', alt: 'Img alt'}, true %}
                    </div>
                    {% endblock bottomBarContentRight %}

                </div>
  
            </div>
        {% endif %}
    {% endblock bottomBar %}
</footer>