{{ $grid_classes = switch(
                    (theme:footer_items | count === 3) => 'md:grid-cols-3',
                    (theme:footer_items | count === 2) => 'md:grid-cols-2',
                    () => 'grid-cols-1') }}
<div class="relative w-full overflow-hidden">
    {{ if theme:has_menu }}
        <div>
            {{ if theme:logo_overlay }}
                <div
                    class="absolute top-0 bottom-0 transform size-96 opacity-5 -z-10 {{ theme:logo_overlay_position === 'left' ? '-translate-x-1/2 left-10' : 'right-0 translate-x-1/2' }}">
                    {{ partial:components/picture class="object-cover size-96" :image="theme:logo_mark" sizes="(min-width: 200px) 35vw, 90vw" }}
                </div>
            {{ /if }}
            <div class="container py-4 md:py-7">
                <div class="grid gap-8 py-16 md:grid-cols-2 lg:grid-cols-4">
                    {{ if theme:custom_column }}
                        {{ partial:layout/footer-items/column }}
                    {{ /if }}
                    {{ nav :handle="theme:footer_menu" }}
                        <div>
                            <p class="mb-6 text-xl font-semibold text-dark-900 dark:text-white">
                                {{ title }}
                            </p>
                            {{ if children }}
                                <ul class="space-y-3">
                                    {{ children }}
                                        {{ partial:partials/footer_menu_item }}
                                    {{ /children }}
                                </ul>
                            {{ /if }}
                        </div>
                    {{ /nav }}
                </div>
                {{ if theme:divider_style === 'logo' }}
                    {{ partial:layout/footer-items/logo_divider }}
                {{ /if }}
            </div>
        </div>
    {{ /if }}
    <div class="{{ theme:divider_style === 'full' ?= 'border-t border-dark-900/20 dark:border-white/20' }}">
        <div
            class="container py-4 md:py-7 {{ theme:divider_style === 'contained' ?= 'border-t border-dark-900/20 dark:border-white/20' }}">
            <div class="grid gap-4 {{ $grid_classes }}">
                {{ theme:footer_items }}
                    {{ partial src="layout/footer-items/{type}" }}
                {{ /theme:footer_items }}
            </div>
        </div>
    </div>
</div>