{{ _text_color = (background_color === '#004F59' ? 'text-white!' : 'text-brand-black!') }}
{{ if banner_set_type != 'full_width_image' }}
    <div class="container-1" style="background-color: {{ background_color }}">
        {{ if banner_set_type === 'donate' }}
            {{ partial src="sets/donate_widget" }}
        {{ else }}
            <div
                class="{{ ['lg:flex lg:flex-row-reverse lg:justify-between lg:gap-8 lg:min-h-129' => banner_set_type === 'image', 'lg:py-12 lg:pr-140' => banner_set_type === 'text'] | classes }} max-lg:px-0!"
            >
                {{ if banner_set_type === 'image' }}
                    <div class="relative flex items-end justify-end self-stretch lg:h-full lg:w-[60%]">
                        <img
                            src="{{ banner_image:url }}"
                            alt="{{ banner_image:alt }}"
                            class="h-full w-full object-cover object-center"
                            fetchpriority="high"
                        />
                        {{ if banner_image && banner_caption }}
                            {{ partial src="caption" align_right="true" caption_text="{banner_caption_text}" }}
                        {{ /if }}
                    </div>
                {{ /if }}
                <div
                    class="{{ ['lg:w-2/5' => banner_set_type === 'image'] | classes }} flex flex-col gap-6 self-stretch text-center max-lg:p-8 lg:items-start lg:justify-center lg:text-left"
                >
                    <h1 class="{{ _text_color }} max-w-full hyphens-auto">
                        {{ banner_heading }}
                    </h1>
                    {{ if banner_description }}
                        <span class="{{ _text_color }} text-copy lg:text-copy-lg">
                            {{ banner_description }}
                        </span>
                    {{ /if }}
                    {{ if banner_primary_button || banner_secondary_button }}
                        <div class="flex flex-col gap-6 lg:flex-row lg:flex-wrap lg:gap-4">
                            {{ if banner_secondary_button }}
                                {{ if (banner_secondary_button_link_type == "url") }}
                                    {{ _banner_secondary_button_link = "{{ banner_secondary_button_link }}" }}
                                {{ elseif (banner_secondary_button_link_type == "collection") }}
                                    {{ _banner_secondary_button_link = "{{ banner_secondary_button_page_story:url }}" }}
                                {{ elseif (banner_secondary_button_link_type == "download") }}
                                    {{ _banner_secondary_button_link = "{{ banner_secondary_button_download }}" }}
                                    {{ banner_secondary_button_target = "_blank" }}
                                {{ /if }}
                                {{ partial:sets/button class="{['text-white!' => background_color === '#004F59', 'w-full'] | classes}" :this_link="_banner_secondary_button_link" :target="banner_secondary_button_target" wrapper_class="grow" }}
                                    {{ banner_secondary_button_text }}
                                {{ /partial:sets/button }}
                            {{ /if }}
                            {{ if banner_primary_button }}
                                {{ if (banner_primary_button_link_type == "url") }}
                                    {{ _banner_primary_button_link = "{{ banner_primary_button_link }}" }}
                                {{ elseif (banner_primary_button_link_type == "collection") }}
                                    {{ _banner_primary_button_link = "{{ banner_primary_button_page_story:url }}" }}
                                {{ elseif (banner_primary_button_link_type == "download") }}
                                    {{ _banner_primary_button_link = "{{ banner_primary_button_download }}" }}
                                    {{ banner_primary_button_target = "_blank" }}
                                {{ /if }}
                                {{ partial:sets/button class="w-full" :this_link="_banner_primary_button_link" :target="banner_primary_button_target" filled="true" wrapper_class="grow" }}
                                    {{ banner_primary_button_text }}
                                {{ /partial:sets/button }}
                            {{ /if }}
                        </div>
                    {{ /if }}
                </div>
            </div>
        {{ /if }}
    </div>
{{ else }}
    <div
        class="bg-none bg-cover bg-center bg-no-repeat lg:min-h-129"
        style="background-image: url(&quot;{{ banner_image:url }}&quot;)"
    >
        <div class="relative h-full max-lg:px-0! lg:min-h-129 lg:justify-between lg:gap-8">
            <div class="relative flex items-end justify-end self-stretch lg:hidden">
                <img
                    src="{{ banner_image:url }}"
                    alt="{{ banner_image:alt }}"
                    class="h-full w-full object-cover object-center"
                />
                {{ if banner_caption }}
                    {{ partial src="caption" align_right="true" caption_text="{banner_caption_text}" }}
                {{ /if }}
            </div>

            <div class="invisible lg:visible">
                {{ if banner_caption }}
                    <div
                        class="absolute h-full w-full max-lg:px-0! lg:min-h-129 lg:justify-between lg:gap-8"
                        style="width:50%; {{ (description_placement == 'Left' ? 'right:0;' : '') }}"
                    >
                        {{ partial src="caption" align_right="{{ (description_placement == 'Left' ? 'true' : 'false') }}" caption_text="{banner_caption_text}" }}
                    </div>
                {{ /if }}
            </div>

            <div
                class="lg:justify-right container mx-auto bg-white lg:flex lg:h-full lg:min-h-129 lg:max-w-350 lg:bg-transparent lg:px-4"
            >
                {{ if (description_placement == 'Right') }}
                    <div class="lg:w-3/5"></div>
                {{ /if }}
                <div
                    class="flex flex-col gap-6 self-stretch text-center lg:w-2/5 lg:items-start lg:justify-center lg:text-left"
                >
                    <div
                        class="w-full p-4 max-lg:p-8 lg:rounded-lg lg:p-6"
                        style="background-color: {{ background_color }}"
                    >
                        <h1 class="{{ _text_color }} max-w-full hyphens-auto">
                            {{ banner_heading }}
                        </h1>
                        {{ if banner_description }}
                            <p class="{{ _text_color }} py-4 text-copy lg:text-copy-lg">
                                {{ banner_description }}
                            </p>
                        {{ /if }}
                        {{ if banner_primary_button || banner_secondary_button }}
                            <div class="flex flex-col gap-6 lg:flex-row lg:flex-wrap lg:gap-4">
                                {{ if banner_secondary_button }}
                                    {{ if (banner_secondary_button_link_type == "url") }}
                                        {{ _banner_secondary_button_link = "{{ banner_secondary_button_link }}" }}
                                    {{ elseif (banner_secondary_button_link_type == "collection") }}
                                        {{ _banner_secondary_button_link = "{{ banner_secondary_button_page_story:url }}" }}
                                    {{ elseif (banner_secondary_button_link_type == "download") }}
                                        {{ _banner_secondary_button_link = "{{ banner_secondary_button_download }}" }}
                                        {{ banner_secondary_button_target = "_blank" }}
                                    {{ /if }}
                                    {{ partial:sets/button class="{['text-white!' => background_color === '#004F59', 'w-full'] | classes}" :this_link="_banner_secondary_button_link" :target="banner_secondary_button_target" }}
                                        {{ banner_secondary_button_text }}
                                    {{ /partial:sets/button }}
                                {{ /if }}
                                {{ if banner_primary_button }}
                                    {{ if (banner_primary_button_link_type == "url") }}
                                        {{ _banner_primary_button_link = "{{ banner_primary_button_link }}" }}
                                    {{ elseif (banner_primary_button_link_type == "collection") }}
                                        {{ _banner_primary_button_link = "{{ banner_primary_button_page_story:url }}" }}
                                    {{ elseif (banner_primary_button_link_type == "download") }}
                                        {{ _banner_primary_button_link = "{{ banner_primary_button_download }}" }}
                                        {{ banner_primary_button_target = "_blank" }}
                                    {{ /if }}
                                    {{ partial:sets/button class="w-full" :this_link="_banner_primary_button_link" :target="banner_primary_button_target" filled="true" }}
                                        {{ banner_primary_button_text }}
                                    {{ /partial:sets/button }}
                                {{ /if }}
                            </div>
                        {{ /if }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{{ /if }}