{% macro overlay(section) %}
    {# Overlay is either hidder or flex #}
    <div id="{{ section.overlayContent.overlayId }}" class="overlay hidden fixed top-0 left-0 bottom-0 right-0 before:absolute before:w-full before:h-full bg-transparent before:bg-secondary-bg-light dark:before:bg-primary-bg-dark before:opacity-90 items-center justify-center p-3 md:p-10 z-[10000]">
        <div class="overlay-card w-full md:w-fit md:max-w-[1276px] bg-white dark:bg-card-bg-dark opacity-100 h-full md:h-fit md:max-h-[660px] z-[10001] rounded-md shadow-[0px_3px_12px_rgba(0,0,0,0.2)] p-6 py-10 sm:p-14 overflow-auto scale-100">
            <h1 class="text-3xl font-bold text-active-blue mb-6">{{ section.overlayContent.title | safe }}</h1>
            <div class="flex flex-col-reverse lg:flex-row gap-10 justify-between">
                {% if section.overlayContent.contentBody %}
                    <div class="lg:max-w-[448px]">
                        <div class="text-grey-black dark:text-white flex flex-col gap-6 text-base">
                            {% include section.overlayContent.contentBody %}
                        </div>
                    </div>
                {% endif %}

                {% if section.overlayContent.showImage %}
                    <div class="max-w-[448px]">
                        <div class="flex items-center justify-center">
                            <img class="w-full max-w-[448px] min-w-[300px] dark:hidden" src="{{ section.imgLight }}" alt="">
                            <img class="w-full max-w-[448px] min-w-[300px] hidden dark:block" src="{{ section.imgDark }}" alt="">
                        </div>
                    </div>
                {% endif %}
            </div>

            <svg class="fill-grey-black dark:fill-white fixed right-5 top-5 cursor-pointer close-overlay-btn" id="cross" width="16" height="16" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.7973 11.5525L7.59762 6.49833L12.7947 1.44675C13.055 1.19371 13.0658 0.771991 12.8188 0.505331C12.5718 0.238674 12.1602 0.227644 11.8999 0.480681L6.65343 5.58028L1.09979 0.182228C0.839522 -0.070157 0.427909 -0.059127 0.18094 0.207531C-0.0660305 0.474191 -0.0552645 0.895911 0.205003 1.14894L5.70862 6.49833L0.20247 11.851C-0.0577975 12.104 -0.0685635 12.5257 0.178407 12.7924C0.306324 12.9306 0.477936 13 0.650181 13C0.811033 13 0.971873 12.9397 1.09726 12.817L6.65343 7.41639L11.9025 12.5186C12.0285 12.6406 12.1893 12.7015 12.3495 12.7015C12.5218 12.7015 12.6934 12.6321 12.8213 12.4939C13.0689 12.2273 13.0582 11.8062 12.7973 11.5525Z"/>
            </svg>
        </div>
    </div>
{% endmacro %}