@aware(['page'])
<div class="theme-max-w mx-auto px-5 overflow-hidden grid grid-cols-1 lg:grid-cols-2 gap-6 mb-10">
    <div class="order-1 lg:order-2 relative flex justify-center items-center overflow-hidden">
        <div class="hidden lg:block absolute right-0 bottom-0 z-0">
            <a href="{{asset('storage/'.$image1)}}" data-lightbox="mini-content">
                <img src="" data-src="{{asset('storage/'.$image1)}}" alt="Wood Panel Background"
                 class="w-[411px] h-[781px] object-cover lazy" />
            </a>
        </div>

        <div class="relative z-10 w-full max-w-[579px] lg:mx-[60px]">
            <a href="{{asset('storage/'.$image2)}}" data-lightbox="mini-content">
                <img src="" data-src="{{asset('storage/'.$image2)}}" alt="Glass Railing Closeup"
                 class="w-full lg:rounded-[40px] object-cover shadow-xl lazy" />
            </a>
        </div>
    </div>

    <div class="order-2 lg:order-1 flex md:py-20">
        <div>
            <div class="px-3 text-slate-600 text-lg font-bold font-['DM_Sans'] uppercase leading-tight tracking-widest pb-3">
                CONTACT US</div>
            <div class="text-gray-950 text-4xl font-['Abhaya_Libre'] sm:text-4xl font-bold leading-[50px] pb-3">
                {{$title}}</div>
            <div class="text-slate-600 text-lg font-normal font-['DM_Sans'] leading-loose mb-8">
               {!!$description!!}
            </div>

            @livewire("MiniContact")
        </div>
    </div>
</div>