@aware(['page'])
<div class="mb-10">
    <div class="theme-max-w mx-auto my-4 px-5">
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 items-center gap-4 md:gap-10">

            <div class="text-left space-y-4 p-2 col-span-1 md:col-span-3 lg:col-span-1">
                <h3 class="text-lg font-semibold uppercase tracking-widest text-gray-800 pb-4">{{$tagline}}</h3>
                <h2 class="text-xl font-bold capitalize leading-snug text-gray-900">{{$title}}</h2>
                <div class="text-md text-gray-700 pb-4"> {{$description}} </div>
                <a href="{{$link}}"><button class="mt-2 border border-black text-sm font-bold uppercase px-5 py-2 hover:bg-black hover:text-white transition">{{$buttonText}}</button></a>
            </div>

            <div class="flex justify-center lg:ml-8">
                <a href="{{asset('storage/'.$image)}}" data-lightbox="text-image-text">
                    <img src="" data-src="{{asset('storage/'.$image)}}" alt="Center Image" class="w-full object-cover rounded-xl shadow-md lazy">
                </a>
            </div>

            <div class="text-xl text-black text-left col-span-1 md:col-span-2 lg:col-span-1 px-4 content text-justify">
                {!! $content !!}
            </div>

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