Offers Scroll

<div class="relative bg-black overflow-hidden" data-vanilla-module="ScrollContainer">
    <div class="js-bg absolute w-full top-0 left-0 max-lg:h-full">
        <img src="{{ 'playground/bg-offers.webp' | asset }}" loading="lazy" alt="" class="w-full max-lg:h-full max-lg:object-cover" />
    </div>
    <div class="lg:flex container relative">  
        {# Left - pin this while right scrolls #}
        <div class="lg:w-1/2 flex flex-col pt-24 js-text-pin relative justify-between h-screen">
            <div class="opacity-0" data-vanilla-module="TextReveal">
                <p class="font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line">
                    Go fast
                </p>
                <p class="font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line">
                    and save
                </p>
                <p class="font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line">
                    this spring
                </p>
            </div>
            <div>
                <img src="/front-end/playground/fg-offers.webp" loading="lazy" alt="" />
            </div>
        </div>
        {# Right - natural scroll height drives the page scroll #}
        <div class="lg:w-1/2">
            <div class="js-offers-track grid grid-cols-1 md:grid-cols-2 gap-y-20 gap-x-10 lg:pt-24 pb-24">
                <div class="md:col-start-2 md:row-start-1 bg-white rounded-lg h-[657px] flex items-center justify-center">
                    Offer 1
                </div>
                <div class="md:col-start-1 md:row-start-1 md:mt-[350px] md:z-10 relative bg-white rounded-lg h-[650px] flex items-center justify-center">
                    Offer 2
                </div>
                <div class="md:col-start-2 md:row-start-2 md:-mt-[350px] bg-white rounded-lg h-[650px] flex items-center justify-center">
                    Offer 3
                </div>
            </div>
        </div>
    </div>
</div>