{% if include.form_type == 'membership' %}
<section class="xl:landscape:min-h-0 lg:landscape:min-h-screen grid md:landscape:grid-cols-2 md:landscape:gap-12 gap-4 grid-cols-1 bg-light md:landscape:px-5 md:landscape:py-12 md:portrait:px-5 px-3 pt-12 pb-5">

    <div class="">
        <div class="flex items-center justify-between border-b border-black pb-5 mb-5"
        data-aos="fade-in">
            <h2 class="title-lg">{{include.heading}}</h2>
            <div class="flex items-center gap-4">
                <span class="block bg-black h-4 w-4 rounded-full"></span>
                {% if include.button_url and include.button_text %}
                <a href="{{include.button_url}}" class="button-dark md:landscape:block hidden">{{include.button_text}}</a>
                {% endif %}
            </div>    
        </div>

        <div
        data-aos="fade-in">
            <div class="md:landscape:w-[80%] my-12">
                {{include.paragraph_html}}
            </div>
        </div>
        
        <div class="mt-12"
        data-aos="fade-in">

        </div>
        
    </div>

    <div class="relative mt-[0.1rem]"
    data-aos="fade-in">
        {% if include.form_type == 'events' %}
            {% include forms/events-form.html %}
        {% elsif include.form_type == 'membership' %}
            {% include forms/join-form.html %}
        {% elsif include.form_type == 'general' %}
            {% include forms/contact-form.html %}
        {% endif %}
    </div>

</section>
{% else %}
<section class="xl:landscape:min-h-0 lg:landscape:min-h-screen grid md:landscape:grid-cols-2 gap-4 grid-cols-1 bg-light md:landscape:padding-sm md:portrait:px-5 px-3 pt-12 pb-3">

    <div class="">
        <div class="flex items-center justify-between border-b border-black pb-5 mb-5"
        data-aos="fade-in">
            <h2 class="title-lg">{{include.heading}}</h2>
            <div class="flex items-center gap-4">
                <span class="block bg-black h-4 w-4 rounded-full"></span>
                {% if include.button_url and include.button_text %}
                <a href="{{include.button_url}}" class="button-dark md:landscape:block hidden">{{include.button_text}}</a>
                {% endif %}
            </div>    
        </div>

        <div class="border-b border-black"
        data-aos="fade-in">
            <div class="md:landscape:w-[80%] my-12">
                {{include.paragraph_html}}
            </div>
        </div>
        
        <div class="mt-12"
        data-aos="fade-in">
        {% if include.form_type == 'events' %}
            {% include forms/events-form.html %}
        {% elsif include.form_type == 'membership' %}
            {% include forms/join-form.html %}
        {% elsif include.form_type == 'general' %}
            {% include forms/contact-form.html %}
        {% endif %}
        </div>
        
    </div>

    <div class="relative"
    data-aos="fade-in">
        <img src="{{include.image}}" alt="{{include.image_alt_text}}" class="object-cover object-center md:landscape:absolute md:landscape:inset-0 w-full md:landscape:h-full md:portrait:h-60 h-80 rounded-xl">
    </div>

</section>
{% endif %}