<section class="generic-cta-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 flex flex-col sm:flex-row justify-center items-center">
                {% if panel.header | length %}
                    <span class="font-body text-lg lg:text-xl text-black-primary text-center sm:text-left">
                        {{ panel.header }}
                    </span>
                {% endif %}
                {% if panel.buttons | length %}
                    <div class="buttons-wrapper w-full relative sm:w-auto flex flex-col md:flex-row justify-start items-start mt-6 sm:mt-0 sm:ml-8 gap-4 sm:gap-8 md:gap-6 lg:gap-10">
                        {% set loopIndex = 0 %}
                        {% for button in panel.buttons %}
                            {% set loopIndex = loopIndex + 1 %}
                            {% for buttonLink in button.buttonLink %}
                                {% if buttonLink.type.handle == 'internalLink' %}
                                    {% include themeDir ~ '/_includes/_modules/_button' with {
                                        'buttonType': 'internal-link',
                                        'buttonText': button.buttonTitle,
                                        'href': buttonLink.buttonLink.one().url,
                                        'title': button.buttonTitle,
                                        'theme': loopIndex == 2 ? 'secondary' : 'primary',
                                        'addClasses': 'font-bold !w-full sm:!w-auto'
                                    } %}
                                {% elseif buttonLink.type.handle == 'externalLink' %}
                                    {% include themeDir ~ '/_includes/_modules/_button' with {
                                        'buttonType': 'external-link',
                                        'buttonText': button.buttonTitle,
                                        'href': buttonLink.buttonLink,
                                        'title': button.buttonTitle,
                                        'theme': loopIndex == 2 ? 'secondary' : 'primary',
                                        'addClasses': 'font-bold !w-full sm:!w-auto'
                                    } %}
                                {% elseif buttonLink.type.handle == 'download' %}
                                    {% include themeDir ~ '/_includes/_modules/_button' with {
                                        'buttonType': 'download',
                                        'buttonText': button.buttonTitle,
                                        'href': buttonLink.buttonLink.one().url,
                                        'title': button.buttonTitle,
                                        'theme': loopIndex == 2 ? 'secondary' : 'primary',
                                        'download': true,
                                        'addClasses': 'font-bold !w-full sm:!w-auto'
                                    } %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>