Text/Image Multiple A

<div class="text-left type p--lg">
    <div class="grid max-w-screen-xl gap-12 mx-auto md:grid-cols-2">
        <div class="relative"> <img src="https://source.unsplash.com/collection/81171080/1600x900" alt="" class="mb-4">
            <div class="relative lc-mb-0i ">
                <h3 class="max-w-2xl">Lorem ipsum dolor.</h3>
                <p class="max-w-lg tiny opacity-80">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat vel repellendus, totam perspiciatis corporis repudiandae sed quibusdam natus.</p><a href="" class="inline-block w-full px-8 py-3 mb-4 text-center text-p-50 transition-colors bg-a-600 rounded md:w-auto md:mb-0 hover:bg-opacity-50">Learn More</a>
            </div>
        </div>
        <div class="relative"> <img src="https://source.unsplash.com/collection/81171080/1600x900" alt="" class="mb-4">
            <div class="relative lc-mb-0i ">
                <h3 class="max-w-2xl">Lorem ipsum dolor.</h3>
                <p class="max-w-lg tiny opacity-80">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat vel repellendus, totam perspiciatis corporis repudiandae sed quibusdam natus.</p><a href="" class="inline-block w-full px-8 py-3 mb-4 text-center text-p-50 transition-colors bg-a-600 rounded md:w-auto md:mb-0 hover:bg-opacity-50">Learn More</a>
            </div>
        </div>
    </div>
</div>