Media Content Panel Style 1 Component: Two Buttons

{% if bgContrast %}
    {% set bgClass = "component-spacer-padding bg-grey-50" %}
{% else %}
    {% set bgClass = "" %}
{% endif %}

{% if flipped %}
    {% set flippedClass = "order-last lg:order-last lg:pl-12" %}
    {% set flippedImgClass = "first lg:order-first" %}
{% else %}
    {% set flippedClass = "order-last lg:order-first lg:pr-12" %}
    {% set flippedImgClass = "order-first lg:order-last" %}
{% endif %}

{% set headingColour = "text-bravo-900" %}

<div class="js-component relative z-0 {% if fullWidthBackground and bgContrast %} {{bgClass}} {% else %}component-spacer-margin{% endif %}">
    <div class="max-w-[1532px] mx-auto {% if not fullWidthBackground and bgContrast %}{{bgClass}}{% endif %}">
        <div class="container">
            <div class="flex flex-col lg:flex-row w-full">
                <div class="flex-1 lg:w-6/12 flex flex-col justify-center align-center {{flippedClass}}">
                    <div>
                        {% if preHeading %}
                            <span class="text-base mb-2 block font-heading font-semibold uppercase leading-tight text-bravo-900">{{ preHeading }}</span>
                        {% endif %}
                        <h2 class="text-4xl lg:text-7xl mb-6 font-heading font-medium {{headingColour}}">{{heading}}</h2>
                        <div class="mb-6 max-w-none prose prose-p:font-heading prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
                            <p>{{description}}</p>
                        </div>
                        <div class="flex gap-4 flex-wrap">
                            {% for item in links %}
                                {% set buttonColour = "bravo" %}
                                {% if item.buttonColour %}
                                    {% set buttonColour = item.buttonColour %}
                                {% endif %}
                                <div>
                                    {% render "@button--" + buttonColour, item, true %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="{{flippedImgClass}} flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0 ">
                        {% if image %}
                            <div class="relative w-full h-full">
                                {% if image.modal %}
                                    <button class="rounded-2xl overflow-hidden relative w-full"  data-micromodal-trigger="{{ image.modal.id }}">
                                        <span class="sr-only">Open Video</span>
                                        <div class="w-24 h-24 absolute top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 z-20 pointer-events-none">
                                            {% render "@icon", { name: "icon-play", modifier: "fill-current w-full h-full text-white drop-shadow-lg" } %}
                                        </div>
                                        {% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: 1200, height: 750, modifier: 'transition ease-in-out duration-300 hover:scale-110' } %}
                                    </button>
                                    {% render "@video-modal", {  id: image.modal.id, url: image.modal.url } %}
                                {% else %}
                                    {% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: 1200, height: 750, modifier: 'rounded-2xl' } %}
                                {% endif %}
                            </div>
                        {% elseif backgroundVideo %}
                            <div class="relative w-full h-auto">
                                <div class="relative w-full">
                                    <div class="aspect-[16/10]"></div>
                                    <video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0 rounded-2xl" muted autoplay loop playsinline>
                                        <source src="{{backgroundVideo.src}}" type="video/mp4">
                                    </video>
                                </div>
                            </div>
                        {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>