@aware(['page'])
<div class="bg-white rounded-lg mb-10">
    <div class="grid mb-5 text-black text-center">
        <h1 class="text-3xl sm:text-4xl md:text-4xl lg:text-6xl font-bold font-['Abhaya_Libre'] leading-tight tracking-tight">
            {{$caption}}
        </h1>
    </div>
    <div>
{{--        <img class="w-full h-auto mx-auto rounded-md max-w-screen-md sm:max-w-screen-lg lg:max-w-screen-xl xl:max-w-[1400px] 2xl:max-w-[2900px] lazy" src="" data-src="{{asset('storage/'.$image)}}" alt="Banner" />--}}
        <video class="w-full h-auto mx-auto rounded-md max-w-screen-md sm:max-w-screen-lg lg:max-w-screen-xl xl:max-w-[1400px] 2xl:max-w-[2900px]" loop autoplay muted playsinline>
            <source src="{{asset('storage/'.$video)}}" type="video/mp4" class="">
        </video>
    </div>
    <div class="theme-bg-blue text-white py-10 rounded-bl-full overflow-hidden hidden md:block">
        <div class="w-full md:max-w-4xl mx-auto px-4 grid gap-6 text-center md:text-left">
            <div
                class="grid md:grid-cols-[2fr_auto] items-center gap-6 px-4 sm:px-6 md:px-16 max-w-screen-sm md:max-w-none mx-auto">
                <div class="w-full mb-12 md:mb-0 overflow-hidden break-words">
                    <div class="text-lg sm:text-xl md:text-2xl font-semibold leading-tight mb-2">
                        {{$title}}
                    </div>
                    <div class="text-md break-words">
                        {!!$description!!}
                    </div>
                </div>
                <div class="w-[100px] ml-auto md:w-auto md:ml-[80px] min-w-0 mb-6 md:mb-0 ">
                    <a href="{{$buttonLink}}">
                        <button
                            class="bg-white theme-text-blue font-semibold rounded shadow-md hover:bg-gray-100 transition-all flex items-center justify-center w-full md:w-auto whitespace-nowrap py-1 px-3 text-base sm:py-2 sm:px-6 sm:text-base">
                            {{$button}} <i class="fa-solid fa-arrow-right-long ml-2"></i>
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="py-5 overflow-hidden block md:hidden">
        <div class="w-full md:max-w-4xl mx-auto px-2 grid gap-6 text-left">
            <div class="grid md:grid-cols-[2fr_auto] items-center gap-6 px-4 sm:px-6 md:px-16 max-w-screen-sm md:max-w-none mx-auto">
                <div class="w-full mb-4 overflow-hidden break-words">
                    <div class="text-lg sm:text-xl md:text-2xl font-semibold leading-tight mb-2">
                        {{$title}}
                    </div>
                    <div class="text-md break-words">
                        {!!$description!!}
                    </div>
                </div>
                <div class="w-[100px] ml-auto md:w-auto md:ml-[80px] min-w-0 mb-6 md:mb-0 ">
                    <a href="{{$buttonLink}}">
                        <button
                            class="theme-bg-blue text-white font-semibold rounded shadow-md hover:bg-gray-100 transition-all flex items-center justify-center w-full md:w-auto whitespace-nowrap py-1 px-3 text-base sm:py-2 sm:px-6 sm:text-base">
                            {{$button}} <i class="fa-solid fa-arrow-right-long ml-2"></i>
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>