<div class="{{ classes }}">
    {{ if title }}
        <div class="mb-4 font-bold text-xl">{{ title }}</div>
    {{ /if }}
    <div class="flex items-center gap-x-3">
        {{ if asset }}
            {{ partial:components/atoms/assets/image width="100" height="100" classes="size-[88px] rounded-full" }}
        {{ /if }}
        <div class="flex flex-col gap-y-2">
            <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-5" }}
                <span>
                    {{ tel }}
                </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-5" }}
                <span>
                    {{ mail }}
                </span>
            </a>
        </div>
    </div>
</div>
