{# Your header goes here #}
<div class="relative">
    <img src="{{'header.jpg' | media }}" class="w-full h-48 md:h-full object-cover" />
    <div class="absolute top-0 w-full h-full left-0 flex justify-center items-center">
        <div class="flex justify-center items-center rounded-full border-2 border-neutral-900 lg:text-xl font-bold overflow-hidden from-orange-300 to-amber-700 bg-gradient-to-tr">
            <a class="text-neutral-800 hover:text-neutral-900 py-2 lg:py-4 px-2 lg:px-6 hover:bg-neutral-500/40 transition duration-400"  href="#ausstattung">Ausstattung</a>
            <a class="text-neutral-800 hover:text-neutral-900 py-2 lg:py-4 px-2 lg:px-6 hover:bg-neutral-500/40 transition duration-400" href="#buchen">Buchungsanfrage</a>
            <a class="text-neutral-800 hover:text-neutral-900 py-2 lg:py-4 px-2 lg:px-6 hover:bg-neutral-500/40 transition duration-400" href="#faq">FAQ</a>

        </div>
    </div>
</div>