<div class="{{ [
    'grid',
    'grid-cols-1',
    'gap-10',
    'w-full',
    'py-10',
    'lg:grid-cols-2 max-w-[1058px] mx-auto' => variant == 'without',
    'lg:grid-cols-3 lg:py-16' => variant == 'with_content'
] | classes | collapse_whitespace }}">
    {{ if variant == 'with_content' }}
        <div class="flex flex-col justify-between gap-y-8 h-full col-span-1">
            <div>
                {{ text }}
                    {{ partial:if_exists src="components/molecules/content/{type}" }}
                {{ /text }}
            </div>

            <div class="hidden relative flex flex-col justify-end h-full lg:flex">
                <div class="sticky top-0 bottom-12">
                    <div class="relative">
                        <div class="mb-3">
                            <h4>{{ contact_title }}</h4>
                            <p>{{ sub_text }}</p>
                        </div>
                        <div class="flex items-center gap-x-3">
                            {{ contact_person }}
                                {{ partial:components/molecules/content/contact_person }}
                            {{ /contact_person }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{ /if }}

    <div class="grid grid-cols-1 gap-10 lg:col-span-2 md:grid-cols-2">
        {{ highlighted_entries }}
            {{ handle = collection:handle | singular }}
            {{ if { partial:exists src="components/organisms/cards/card-{handle}" } }}
                {{ partial src="components/organisms/cards/card-{handle}" }}
            {{ else }}
                {{ partial src="components/organisms/cards/card" }}
            {{ /if }}
        {{ /highlighted_entries }}
    </div>

    <div class="relative flex flex-col justify-end h-full lg:hidden">
        <div class="sticky top-0 bottom-12">
            <div class="relative">
                <div class="mb-3">
                    <h4>{{ contact_title }}</h4>
                    <p>{{ sub_text }}</p>
                </div>
                <div class="flex items-center gap-x-3">
                    {{ contact_person }}
                        <div class="flex items-center gap-x-3">
                            {{ partial:components/atoms/assets/image width="100" height="100" classes="size-[88px] rounded-full" }}
                            <div class="flex flex-col gap-y-1">
                                <div class="font-semibold">{{ title }}</div>
                                <a href="tel:{{ phone_number }}" class="flex items-center gap-x-2 text-base underline decoration-2 underline-offset-4 hover:no-underline">
                                    {{ partial:components/atoms/icons/phone size="size-6" }}
                                    <span>
                                        {{ phone_number }}
                                    </span>
                                </a>
                                <a href="mailto:{{ email }}" class="flex items-center gap-x-2 text-base underline decoration-2 underline-offset-4 hover:no-underline">
                                    {{ partial:components/atoms/icons/mail size="size-6" }}
                                    <span>
                                        {{ email }}
                                    </span>
                                </a>
                            </div>
                        </div>
                    {{ /contact_person }}
                </div>
            </div>
        </div>
    </div>
</div>
