Hero Transparent Video

<div class="aspect-square lg:aspect-16/6 bg-alpha relative overflow-hidden">
    <div class="bg-gradient-to-r from-alpha to-alpha-600 absolute w-full left-0 top-0 h-full z-10 mix-blend-color"></div>
    <div class="absolute z-20 w-full h-full flex items-center justify-center">
        <div class="container 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">
                Our lowest 
            </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">
                prices ever
            </p>
        </div>
    </div>
    <video preload="auto" class="absolute z-5 object-cover w-full h-full top-0 left-0 lazyloaded" muted="" autoplay="" loop="" playsinline="">
        <source src="/front-end/playground/field.webm" type="video/webm">
    </video>
    <div class="absolute z-20 right-0 bottom-0">
        <video preload="auto" muted="" autoplay="" loop="" playsinline="">
            <source src="/front-end/playground/giganaught-transparent.webm" type="video/webm">
        </video>
    </div>
</div>