Mega Secondary List

{% set colHeadingId = colHeading | lower | replace(" ", "-") %}

{% set colClass = "lg:col-span-3" %}

{% set colLength = columns | length %}

{% if colLength == 2 %}
    {% set colClass = "lg:col-span-6" %}
{% elseif colLength == 3 %}
    {% set colClass = "lg:col-span-9" %}
{% elseif colLength == 4 %}
    {% set colClass = "lg:col-span-12" %}
{% endif %}

<div class="{{colClass}}">
    <ul>
        <li>
            <h2 class="flex font-heading font-extrabold leading-tight text-nav-fg lg:block lg:text-bravo lg:mb-2 lg:pb-2">
                <span class="flex-1 py-2 lg:p-0 text-3xl lg:text-2xl lg:block">{{ colHeading }}</span>
            </h2>
            <div class="overflow-y-auto lg:overflow-visible h-full w-full">
                <div class="lg:flex lg:space-x-8">
                    {% for column in columns %}
                        <ul class="lg:flex-1">
                            {% for item in column.list %}
                                {% render "@menu-list-item", item %}
                            {% endfor %}
                        </ul>
                    {% endfor %}
                    
                </div>
            </div>
            {% if showButton %}
                <div class="mt-8 mb-2 lg:mb-0 lg:mt-10 lg:px-0">
                    {% render "@button--gradient", link, true %}
                </div>
            {% endif %}
        </li>
    </ul>   
</div>