@aware(['page'])
<div class="w-full bg-white flex flex-col items-center justify-center px-4 mb-10">
    <div class="theme-max-w mx-auto mx-4 px-5">
        <div class="text-center mb-8">
            <h2 class="text-4xl font-bold  mb-4 text-zinc-950">{{$title}}</h2>
            <div class="text-lg text-[#393939] max-w-xl mx-auto leading-loose">{{$description}}</div>
        </div>
        <div class="flex flex-col lg:flex-row items-center gap-8 bg-white rounded-3xl border border-gray-300">
            <div class="w-full lg:w-1/2 relative">
                <div class="border-2 border-gray-200 rounded-tl-3xl rounded-bl-3xl overflow-hidden">
                    <div class="relative w-full" style="padding-top: 56.25%;">{!! $embed !!}</div>
                </div>
            </div>
            <div class="w-full lg:w-1/2 space-y-6 pb-4">
                <div class="w-40 h-12 flex items-center justify-center overflow-hidden">
                    <div class="text-3xl font-bold text-black">{{$socialmedia}}</div>
                </div>
                <div class="text-lg text-[#393939] leading-loose px-3">{{$mediadescription}}</div>
                <div class="text-xl font-bold text-zinc-950 px-3 mb-3">{{$author}}</div>
            </div>
        </div>
    </div>
</div>