{% set numCols = 0 %}
{% for column in panel.columns %}
    {% set numCols = numCols + 1 %}
{% endfor %}

{# Link Classes #}
{% set linkClasses = 'font-body text-base lg:text-lg text-black-primary flex flex-row justify-center items-center p-1 pr-4 rounded-full transition-colors duration-700 xs:hover:bg-brand-cream-i focus:border-brand-terracotta-i active:border-brand-terracotta-i focus:ring-2 focus:ring-brand-terracotta-i active:ring-2 active:ring-brand-terracotta-i group' %}

<section class="generic-contact-options-panel w-full relative">
    <div class="container-wrapper max-w-7xl mx-auto">
        <div class="padding-wrapper px-6 sm:px-8 lg:px-10 py-8 sm:py-10 lg:py-12 xl:py-16">
            <div class="grid-wrapper w-full bg-brand-cream-viii flex flex-col justify-start items-start lg:grid-cols-{{ numCols }} overflow-hidden rounded-lg lg:rounded-xl border-2 border-solid border-brand-terracotta-i{{ numCols > 1 ? ' md:grid md:grid-cols-2' }}">
                {% for column in panel.columns %}
                    <div class="column w-full h-full flex flex-col justify-start items-start border-t-2 first:border-0 border-solid border-brand-terracotta-i{{ numCols > 2 ? ' md:last:col-span-2 lg:last:col-span-1 md:border-b-2 md:first:border-b-2' }}{{ numCols > 1 ? ' md:border-t-0 md:first:border-r-2 md:last:border-0 lg:last:border-l-2 lg:border-0 lg:border-l-2 lg:first:border-0' }}">
                        <div class="padding-wrapper p-4 lg:p-6">
                            <div class="content-wrapper w-full flex flex-col justify-start items-start">
                                <h2 class="font-header text-2xl lg:text-3xl font-semibold text-brand-terracotta-aa">
                                    {{ column.header }}
                                </h2>
                                <div class="links-wrapper w-full flex flex-col xs:flex-row md:flex-col xl:flex-row justify-start items-start xs:items-center md:items-start xl:items-center gap-2 mt-4 lg:mt-6">
                                    {% for link in column.links %}
                                        {% if link.type == 'email' %}
                                            <a href="mailto:{{ link.emailAddress }}" class="email-link {{ linkClasses }}">
                                                <span class="icon-wrapper flex justify-center items-center pointer-events-none rounded-full w-8 lg:w-10 h-8 lg:h-10 bg-brand-cream-v">
                                                    {{ svg(svgPath ~ '/core/mail-icon.svg') | attr({ class: 'w-8 lg:w-10 transition-colors duration-700 text-brand-terracotta-i group-hover:text-brand-terracotta-aaa pointer-events-none' }) }}
                                                </span>
                                                <span class="pointer-events-none ml-4">
                                                    {{ link.emailAddress }}
                                                </span>
                                            </a>
                                        {% elseif link.type == 'phone' %}
                                            <a href="tel:{{ link.phoneNumber }}" class="phone-link {{ linkClasses }}">
                                                <span class="icon-wrapper flex justify-center items-center pointer-events-none rounded-full w-8 lg:w-10 h-8 lg:h-10 bg-brand-cream-v">
                                                    {{ svg(svgPath ~ '/core/phone-icon-2.svg') | attr({ class: 'w-8 lg:w-10 transition-colors duration-700 text-brand-terracotta-i group-hover:text-brand-terracotta-aaa pointer-events-none' }) }}
                                                </span>
                                                <span class="pointer-events-none ml-4">
                                                    {{ link.phoneNumber }}
                                                </span>
                                            </a>
                                        {% elseif link.type == 'internalLink' %}
                                            <a href="{{ link.linkedEntry.one().url }}" class="internal-link {{ linkClasses }}">
                                                <span class="icon-wrapper flex justify-center items-center pointer-events-none rounded-full w-8 lg:w-10 h-8 lg:h-10 bg-brand-cream-v">
                                                    {{ svg(svgPath ~ '/core/info-icon.svg') | attr({ class: 'w-8 lg:w-10 transition-colors duration-700 text-brand-terracotta-i group-hover:text-brand-terracotta-aaa pointer-events-none' }) }}
                                                </span>
                                                <span class="pointer-events-none ml-4">
                                                    {{ link.linkTitle }}
                                                </span>
                                            </a>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>