{% set title = title | default(value="") %}
{% set subheader = subheader | default(value="") %}
{% set subtitle = subtitle | default(value="") %}
{% set description = description | default(value="") %}
{% set description_2 = description_2 | default(value="") %}
{% set button_text = button_text | default(value="") %}
{% set button_link = button_link | default(value="") %}
{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}

<div class="lg:py-24 py-12 fade-in lg:max-w-7xl container mx-auto px-4">
    <div class="relative isolate">
        <div class="mx-auto mt-10 lg:mt-0  lg:flex lg:items-center lg:gap-x-15 ">
            <div class="lg:order-2 mt-6 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
                <img class="w-full max-w-md h-auto object-cover rounded-xl" src="{{ image_src }}" 
                    alt="{{ image_alt }}">
            </div>
            <div class="mx-auto max-w-xl lg:mx-6 lg:flex-auto">
                <p class="text-base mt-4 font-light tracking-wide">{{ subheader }}</p>
                <h2 class="fade-in my-4">{{ title }}</h2>
                <h3 class="font-light lg:text-3xl text-xl">
                    {{ subtitle }}
                </h3>
                    <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light  fade-in">
                       {{ description }}
                    </p>
                    <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light  fade-in">
                       {{ description_2 }}
                    </p>
                    {% if button_link %}
                    <div class="mt-6 flex">
                    <a href="{{ button_link }}" class="rounded-2xl bg-black border border-white 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>
                    {% endif %}

            </div>
            

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