<div class="py-24 lg:pt-0 fade-in bg-semi-white container mx-auto px-6 lg:px-8">
    <div class="relative isolate">

        <div class="mx-auto mt-10 lg:mt-0  lg:flex lg:items-center lg:gap-x-15 ">
            <div class="mx-auto max-w-lg lg:mx-0 lg:flex-auto">
                <p class="text-base font-light tracking-wide">{{ subtitle_1 }}</p>
                <h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight ">{{ title }}</h2>
                    <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light  fade-in">
                       {{ description }}
                    </p>
                    <div class="mt-6 flex">
                    <a href="{{ button_link }}" class="rounded-2xl bg-black px-4 py-2 text-sm font-semibold text-white shadow hover:bg-gray-700 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-gray-300">{{ button_text }}</a>
                    </div>

            </div>
            <div class="lg:order-first mt-6 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
                <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="{{ image_src }}" 
                    alt="{{ image_alt }}">
            </div>

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

