Hero Variant 2: Bravo Background

{% if buttonColour %}
    {% set buttonModifier = buttonColour %}
{% else %}
    {% set buttonModifier = 'default' %}
{% endif %}

{% if theme %}
    {% set bgColourClass = theme.bgColour %}
    {% set textColourClass = theme.textColour %}
    {% set richTextColourClass = theme.richTextColour %}
{% else %}
    {% set bgColourClass = 'bg-grey-50' %}
    {% set textColourClass = 'text-bravo-900' %}
    {% set richTextColourClass = '' %}
{% endif %}

<div class="js-component md:bg-grey-50 relative block md:grid grid-cols-1 auto-rows-auto md:grid-cols-1 md:grid-rows-1 overflow-hidden z-0 {{ bgColourClass }} ">
    {% if gradient %} 
        <div class="{{gradient}} absolute w-full h-full z-10 hidden md:block"></div>
    {% endif %}
    <div class="md:col-start-1 md:col-end-md:row-start-1 md:row-end-2 relative hero-clip md:clip-path-none">
        {% if image %}
            {% render "@image-frame", { src: image.src, srcSet: image.srcSet, mdMax: image.mdMax, modifier: 'h-full object-cover', frameModifier: 'h-full', width: image.width, height: image.height } %}
        {% elseif backgroundVideo %}
            <div class="aspect-[16/10] lg:aspect-[16/6]"></div>
            <video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0" muted autoplay loop playsinline>
                <source src="{{backgroundVideo.src}}" type="video/mp4">
            </video>
        {% endif %}
    </div>
    <div class="md:col-start-1 md:col-end-1 md:row-start-1 md:row-end-2 md:flex md:items-center relative -mt-3/10 md:mt-0">
        {% if gradientMobile %} 
            <div class="{{gradientMobile}} absolute w-full h-48 z-10 md:hidden -top-48"></div>
        {% endif %}
        <div class="mx-auto max-xsm:max-w-screen-xsm max-sm:max-w-screen-sm md:container">
            <div class="px-6 py-7 lg:px-12 lg:py-13 md:w-96 lg:w-[420px] xl:w-[580px] relative rounded-3xl {{ bgColourClass }}">
                <div class="relative flex flex-col justify-center z-20">
                    {% if heading %}
                        <h1 class="text-5xl xl:text-9xl font-medium font-heading leading-none {{textColourClass}} ">{{ heading }}</h1>
                    {% endif %}
                    {% if caption %}
                        <div class="block prose prose-p:font-light prose-lg lg:prose:xl prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl mt-6 {{richTextColourClass}}">
                            <p>{{ caption }}</p>
                        </div>
                    {% endif %}
                    {% if link %}
                        <div class="mt-6">
                            {% render "@button--" + buttonModifier, link, true %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>