{{ is_title_pulled_forward = image_column_title && image_column_pull_title }}

{{ partial:components/section :bg-image="background.image ? background.image[0] : null" :max-width="options.max_content_width" flush="true" :class="options.custom_class_name" }}

    {{ if header }}
    <h2 class="
        mt-[56px] mb-[20px] text-[30px] font-medium leading-[1.27] tracking-[3px] text-[#363636]
        md:text-[24px] md:font-medium md:leading-[1.58] md:tracking-[2.4px] md:text-[#363636] md:mt-[90px] md:mb-[25px]
        sm:text-[24px] sm:font-medium sm:leading-[1.25] sm:tracking-[2.4px] sm:text-[#3b3b3b] sm:mt-[90px] sm:mb-[15px]
        pl-0 md:pl-3 lg:pl-4 text-center md:text-left
    ">
        {{ header }}
    </h2>
    {{ /if }}

    {{ if is_title_pulled_forward }}
        <div class="{{ if options.extra_section_padding }} pt-16 {{ else }} pt-12 {{ /if }}">
            {{ partial:components/section-title :bg-color="background.color" :text="image_column_title" :class="options.title_style" }}
        </div>
    {{ /if }}

    <div class="
        flex justify-center flex-col items-center md:flex-row md:items-stretch
        {{ if image_column_placement === 'right' }} md:flex-row-reverse {{ /if }}
    ">
        {{ image_column_image }}
        <div class="
            flex-shrink-0 w-10/12 max-w-xs md:w-1/3 mx-5 relative img-col
            {{ if !is_title_pulled_forward }} flex items-center {{ else }} mt-3 {{ /if }}
        ">
            <img
                src="{{ url }}"
                alt="{{ alt ?? image_column_title }}"
                class="mx-auto md:mr-0 max-width-full mb-6 {{ if !is_title_pulled_forward }} mt-8 md:my-4 min-w-[180px] {{ else }} md:mb-12 {{ /if }}"
            />
        </div>
        {{ /image_column_image }}

        <div class="
            px-5 md:pl-3 lg:pl-8 flex flex-col justify-center md:text-left text-col
            {{ if options.extra_section_padding }} pb-16 {{ else }} pb-12 {{ /if }}
            {{ if !is_title_pulled_forward }}
                {{ if options.extra_section_padding }} md:pt-16 {{ /if }}
            {{ else }}
                md:pt-0
            {{ /if }}

        ">
            {{ if !is_title_pulled_forward }}
                {{ partial:components/section-title :text="image_column_title" :class="options.title_style + ' lg:whitespace-nowrap mb-[12px] uppercase text-[24px] font-medium leading-[30px] tracking-[2.4px] text-left'" }}
            {{ /if }}

            {{ if image_column_text }} {{ partial:components/text-wrapper :text="image_column_text" :class="options.text_style" }} {{ /if }}

            {{ if cta.url }} {{ partial:components/content/cta :href="cta.url" :text="cta.text"}} {{ /if }}

        </div>
    </div>
{{ /partial:components/section }}