Hero Variant 1: Image Desktop Video Mobile

{% if fullHeight %}
    {% set minHeightMob = "min-h-[740px]" %}
    {% set minHeightDesk = "lg:min-h-[max(100vh,700px)]" %}
    {% set pb = "pb-34" %}
{% else %}
    {% set minHeightMob = "min-h-[440px]" %}
    {% set minHeightDesk = "lg:min-h-[max(calc(100vh-160px),700px)]" %}
    {% set pb = "pb-20" %}

    {% if showPostcodeLookup %}
        {% set pb = "pb-26" %}
    {% else %}
        {% set pb = "pb-26 lg:pb-44" %}
    {% endif %}
{% endif %}

<div class="{{ minHeightMob }} {{ minHeightDesk }} {%if peek %}lg:min-h-[max(calc(100vh-160px),700px)]{% else %}lg:min-h-[max(100vh,700px)]{%endif %} z-0 grid w-full relative overflow-hidden pt-[100px] lg:pt-[130px] {{ pb }}">
    {% render "@hero-gradient", { opacity: headerGradientOpacity } %}
    <div class="bg-brand-gradient absolute w-full left-0 top-0 h-full z-5"></div>
        {% if video.desktop or video.mobile %}
            <video data-vanilla-module="VideoMQSwitcher" data-breakpoint="(max-width: 1023px)" preload="auto" 
                class="opacity-0 transition-opacity duration-1000 absolute z-5 object-cover w-full h-full top-0 left-0 max-lg:object-right" 
                muted="" autoplay="" loop="" playsinline="">
                {% if video.mobile %}
                    <source media="(max-width: 1023px)" src="{{ video.mobile }}" type="video/webm">
                {% endif %}
                {% if video.desktop %}
                    <source media="(min-width: 1024px)" src="{{ video.desktop }}" type="video/webm">
                {% endif %}
            </video>
        {% endif %}
        {# Only render picture if there's an image for a breakpoint that has no video #}
        {% if (image.mobile and not video.mobile) or (image.desktop and not video.desktop) %}
            <picture class="w-full h-full top-0 left-0 absolute z-5 {% if video.desktop %}lg:hidden{% endif %} {% if video.mobile %}max-lg:hidden{% endif %}">
                {% if image.mobile and not video.mobile %}
                    <source media="(max-width: 1023px)" srcset="{{ image.mobile }}">
                {% elseif video.mobile %}
                    <source media="(max-width: 1023px)" srcset="{{ '/front-end/images/pixel.png' | path }}">
                {% elseif image.desktop and not video.desktop %}
                    <source media="(max-width: 1023px)" srcset="{{ image.desktop | path }}">
                {% endif %}
                {% if image.desktop and not video.desktop %}
                    <source media="(min-width: 1024px)" srcset="{{ image.desktop | path }}">
                {% elseif video.desktop %}
                    <source media="(min-width: 1024px)" srcset="{{ '/front-end/images/pixel.png' | path }}">
                {% endif %}
                {% set fallbackSrc = image.desktop | path if (image.desktop and not video.desktop) else (image.mobile if (image.mobile and not video.mobile) else '/front-end/images/pixel.png' | path) %}
                <img alt="" srcset="{{ fallbackSrc }}" sizes="100vw" class="object-cover object-center w-full h-full" />
            </picture>
        {% endif %}
    <div class="z-20 w-full">
        <div class="container flex h-full flex-col justify-between mx-auto">
            <div class="flex-1 py-24 lg:pt-[10%] lg:pb-[7%]">
                {% if heading %}
                    <h1>
                        {% for word in heading %}
                            <span class="block max-w-[900px] hero-text font-extrabold italic uppercase text-[clamp(2.4rem,8vw,88px)] text-white leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">{{ word }}</span>
                        {% endfor %}
                    </h1>
                {% endif %}
                {% if subHeading %}
                    <div class="max-w-[900px] hero-text mt-6 font-extrabold italic text-[clamp(1.2rem,3vw,32px)] text-white leading-snug js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
                        {{ subHeading }}
                    </div>
                {% endif %}
            </div>
            {% if showPostcodeLookup %}
                <div class="relative flex-shrink-0 w-full h-[78px] lg:h-[81px]">
                    <div data-vanilla-module="StickyPostcode">
                        <div class="flex items-center justify-center w-full">
                            {% render "@postcode-lookup" %}
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>