Cta Card List Style 2 Component

<div class="js-component relative z-0 container component-spacer-margin">

    <div class="text-center mb-8 lg:mb-12">
        <h2 class="text-6xl  block font-heading font-bold leading-tight text-bravo">Products &amp; Services</h2>

        <div class="prose xl:prose-lg mt-4 lg:mt-6 max-w-screen-sm mx-auto">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        </div>

    </div>

    <div class="w-full space-y-6 md:space-y-0 md:grid md:gap-6 md:grid-cols-2">

        <a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
            <div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

                <h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Products</h2>

                <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

            </div>
            <div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
                <div class="w-full h-full">

                    <picture class="block overflow-hidden  w-full">

                        <source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w">

                        <img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example1@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@1-1@1200w.jpg">

                    </picture>
                </div>
            </div>
        </a>

        <a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
            <div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

                <h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Services</h2>

                <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

            </div>
            <div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
                <div class="w-full h-full">

                    <picture class="block overflow-hidden  w-full">

                        <source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w">

                        <img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example2@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@1-1@1200w.jpg">

                    </picture>
                </div>
            </div>
        </a>

    </div>
</div>