<section>
<div class="mx-auto max-w-screen-xl p-4 sm:p-12 md:p-16 lg:p-20">
<div class="mb-12 grid grid-cols-12 items-center gap-y-8 md:gap-12">
<div class="col-span-12 md:col-span-6">
<div class="grid grid-cols-12 gap-6">
<div class="col-span-6">
<img class="h-auto w-full rounded-lg sm:-mt-4 sm:-ml-3" src="https://images.pexels.com/photos/905163/pexels-photo-905163.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
</div>
<div class="col-span-6">
<img class="h-auto w-full rounded-lg" src="https://images.pexels.com/photos/590016/pexels-photo-590016.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
</div>
<div class="col-span-12 px-4">
<img class="h-auto w-full rounded-lg" src="https://images.pexels.com/photos/5833772/pexels-photo-5833772.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6">
<div>
<div class="text-sm font-bold text-red-500">WHY ARE WE?</div>
<h2 class="mt-3 text-2xl font-medium md:text-3xl lg:text-4xl xl:text-5xl">Company that believes in the power of creative strategy.</h2>
<p class="mt-6 text-sm text-gray-700">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit ratione quisquam adipisci cupiditate ducimus, vitae quibusdam modi consectetur, aliquam deleniti atque quidem porro commodi placeat mollitia expedita asperiores. Voluptate molestias deleniti hic asperiores similique repellendus perspiciatis dolor ullam id dignissimos!</p>
</div>
</div>
</div>
<div class="grid grid-cols-12 gap-y-8 sm:gap-12">
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<div class="flex flex-col gap-x-4 sm:flex-row">
<div class="flex h-12 w-12 items-center justify-center rounded-full border bg-purple-50 p-5 text-purple-500 shadow">1</div>
<div>
<strong class="mb-2">Our Vision</strong>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci in dolorum odio quidem quam perspiciatis temporibus distinctio, tempora iste esse.</p>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<div class="flex flex-col gap-x-4 sm:flex-row">
<div class="flex h-12 w-12 items-center justify-center rounded-full border bg-purple-50 p-5 text-purple-500 shadow">2</div>
<div>
<strong class="mb-2">Our Mission</strong>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci in dolorum odio quidem quam perspiciatis temporibus distinctio, tempora iste esse.</p>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-4">
<div class="flex flex-col gap-x-4 sm:flex-row">
<div class="flex h-12 w-12 items-center justify-center rounded-full border bg-purple-50 p-5 text-purple-500 shadow">3</div>
<div>
<strong class="mb-2">Our Values</strong>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci in dolorum odio quidem quam perspiciatis temporibus distinctio, tempora iste esse.</p>
</div>
</div>
</div>
</div>
</div>
</section>
