Banner

<div class="@container group h-full
    {% if layout.isFullWidth == "10col" or layout.isFullWidth == "6col" %}sm:container py-6{% endif %}
">
    <div class="relative h-full
        {% if layout.isFullWidth == "full" %}flex items-center{% endif %}
        {% if layout.isFullWidth == "10col" %}grid-layout items-center{% endif %}
        {% if layout.isFullWidth == "6col" %}grid-layout items-center{% endif %}
        {% if layout.alignment == 'center' %}justify-center{% endif %}
    ">
        {# Background Layer #}
        {% if background.type == 'image' %}
            <picture class="absolute inset-0 w-full h-full
                {% if layout.isFullWidth == "10col" %}sm:col-start-2 sm:col-span-10{% endif %}
                {% if layout.isFullWidth == "6col" %}sm:col-start-4 sm:col-span-6{% endif %}
            ">
                <source srcset="{{ background.desktop }}" media="(min-width: 769px)"/>
                <img
                    src="{{ background.mobile }}"
                    alt="{{ background.alt }}"
                    class="object-cover w-full h-full {% if layout.portraitMode %}object-right-top{% endif %}"
                    loading="lazy"
                />
            </picture>
        {% elseif background.type == 'color' %}
            <div class="absolute inset-0 w-full h-full {{ background.color }}
            {% if layout.isFullWidth == "10col" %}sm:col-start-2 sm:col-span-10{% endif %}
            {% if layout.isFullWidth == "6col" %}sm:col-start-4 sm:col-span-6{% endif %}
            "></div>
        {% endif %}

        {# overlay #}
        <div class="absolute inset-0
            {% if layout.isFullWidth == "10col" %}sm:col-start-2 sm:col-span-10{% endif %}
            {% if layout.isFullWidth == "6col" %}sm:col-start-4 sm:col-span-6{% endif %}
            {% if background.type == 'image' %}{{ background.overlay|default('bg-black/08') }} mix-blend-overlay{% else %}group-hover:bg-black/08{% endif %}
        "></div>

        {# Content Container #}
        <section class="relative flex items-center min-h-62 md:min-h-[346px] 2xl:min-h-88 3xl:min-h-100 adjusted-marg-y-sm
            {% if layout.hasNaosBorder == false %}adjusted-marg-x-sm{% endif %}

            {% if layout.isFullWidth == "10col" %}col-span-4 sm:col-start-2 sm:col-span-10{% endif %}
            {% if layout.isFullWidth == "6col" %}col-span-4 sm:col-start-4 sm:col-span-6{% endif %}

            {% if layout.alignment == "center" %}justify-center{% endif %}

            {% if layout.textSize == "mid" %}w-1/2{% endif %}
        ">
            <article class="
                relative flex gap-3 w-full
                {% if layout.alignment == 'between' %}flex-row justify-between{% else %}flex-col{% endif %}
                {% if layout.hasNaosBorder %}adjusted-marg-l-sm border-l-8 border-naos{% endif %}
                {% if layout.portraitMode %}mb-10 mt-[468px]{% endif %}
            ">
                {# Text #}
                <div class="flex flex-col gap-1.5
                    {% if layout.alignment == 'center' %}text-center items-center{% endif %}
                    {% if layout.alignment == "between" %}w-1/2{% endif %}
                ">
                    {% if content.uptitle %}
                        <p class="h6-base [&>span]:md:font-semibold [&>span]:md:uppercase {{ content.uptitle.class }}">
                            {{ content.uptitle.text }}
                        </p>
                    {% endif %}

                    {% if content.title %}
                        <h2 class="h2 [&>span]:font-normal {{ content.title.class }}">
                            {{ content.title.text }}
                        </h2>
                    {% endif %}

                    {% if content.subtitle %}
                        <p class="h6-base [&>span]:md:font-semibold [&>span]:md:uppercase {{ content.subtitle.class }}">
                            {{ content.subtitle.text }}
                        </p>
                    {% endif %}

                    {% if content.link %}
                        {% render "@template-link" with {
                            label: content.link.label,
                            href: content.link.href,
                            type: content.link.theme|default("light"),
                            size: 'medium',
                            link_class: "font-bold items-center",
                            icon_type: "leading-icon",
                            icon: {
                                name: "heroicons--clock-outline",
                                size: 20
                            }
                        } %}
                    {% endif %}
                </div>

                {# Btn #}
                <div class="flex {% if layout.alignment != "left" %}justify-center{% endif %} items-center gap-4">
                    {% render "@template-button" with {
                        label: cta.primary.label,
                        color: cta.primary.color,
                        type: cta.primary.type,
                        href: cta.primary.link,
                        button_class: "w-max"
                    } %}
                </div>
            </article>
        </section>
    </div>

</div>