Mega Dropdown

{% set dropDownId = heading | lower | replace(" ", "-") %}

<div id="second-level-menu-{{dropDownId}}" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:-translate-x-full lg:transition-none lg:z-40  group-hover:opacity-100 lg:group-hover:translate-x-0 lg:focus-within:opacity-100 lg:focus-within:translate-x-0">
    <div class="overflow-y-auto lg:overflow-visible h-full bg-white lg:bg-grey-100"> 
        <div class="h-full lg:h-auto z-20 lg:relative lg:shadow-top-light">
            <div class="h-full lg:h-auto lg:container lg:pt-6 lg:pb-11 lg:group-hover:animate-fadeQuick">
                <button class="js-mobile-second-level-trigger-back w-full lg:hidden px-6 py-4 flex items-center text-bravo-900 border-bravo-200 border-b mb-8" aria-controls="second-level-menu-{{dropDownId}}" aria-expanded="false" aria-controls="second-level-menu-{{ dropDownId }}">
                    <div class="w-4 h-4 mr-4">
                        {% render "@icon", { name: "icon-chevron", modifier: 'w-full h-full fill-current text-bravo-900 transform rotate-90', ariaHidden: true } %}
                    </div>
                    <span class="font-medium text-3xl text-bravo-900 lg:hidden"> 
                         {{ heading }}
                    </span>
                </button> 
                <div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12">
                    {% for megaItem in megaList %}
                        {% render "@" + megaItem.component, megaItem.data %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>