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 lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Products &amp; Services</h2>

        <div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6  text-bravo-900 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-100 hover:bg-grey-100 border border-transparent flex  p-4 flex-col lg:flex-row  h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
            <div class="flex relative z-10 flex-col  justify-center flex-2 py-8 lg:px-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

                <h2 class="relative  text-2xl  font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Products</h2>

                <p class="mt-2 text-bravo-900 ">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 rounded-lg w-full">

                        <source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example11@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-100 hover:bg-grey-100 border border-transparent flex  p-4 flex-col lg:flex-row  h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
            <div class="flex relative z-10 flex-col  justify-center flex-2 py-8 lg:px-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

                <h2 class="relative  text-2xl  font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Services</h2>

                <p class="mt-2 text-bravo-900 ">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 rounded-lg w-full">

                        <source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example11@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/example11@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@1-1@1200w.jpg">

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

    </div>
</div>