Numbered Service Card with Bullets & Thumbnails

<div class="sm:p-8 border-white/10 border-b px-6 py-6">
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
                        <div class="md:col-span-1">
                            <div class="text-3xl sm:text-4xl text-gray-400 tabular-nums font-geist tracking-tighter">1</div>
                        </div>
                        <div class="md:col-span-8">
                            <ul class="space-y-2">
                                <li class="flex items-start gap-2 text-sm text-gray-700">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 stroke-1.5 mt-0.5 text-green-500"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                    <span class="font-geist">Logo Design &amp; Visual Identity</span>
                                </li>
                                <li class="flex items-start gap-2 text-sm text-gray-700">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 stroke-1.5 mt-0.5 text-green-500"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                    <span class="font-geist">Brand Guidelines &amp; Typography Systems</span>
                                </li>
                                <li class="flex items-start gap-2 text-sm text-gray-700">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 stroke-1.5 mt-0.5 text-green-500"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                    <span class="font-geist">Marketing Collateral &amp; Print Design</span>
                                </li>
                            </ul>

                            <div class="mt-4 flex items-center gap-3">
                                <div class="aspect-[4/3] w-24 sm:w-28 rounded-md overflow-hidden border border-white/20">
                                    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a9c8b9c0-3bcd-4910-8076-82f53f9a6acd_800w.jpg" alt="Brand identity materials" class="w-full h-full object-cover">
                                </div>
                                <div class="aspect-[4/3] w-24 sm:w-28 rounded-md overflow-hidden border border-white/20">
                                    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/00f75d26-1523-4d97-b303-ce380c94d0e7_800w.jpg" alt="Logo design concepts" class="w-full h-full object-cover">
                                </div>
                                <div class="aspect-[4/3] w-24 sm:w-28 rounded-md overflow-hidden border border-white/20">
                                    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/41f44e91-a4d8-4042-8253-0c6a79be833b_800w.jpg" alt="Business stationery" class="w-full h-full object-cover">
                                </div>
                            </div>
                        </div>
                        <div class="md:col-span-3 md:text-right">
                            <h3 class="text-lg sm:text-xl tracking-tight font-semibold text-gray-900 font-geist">Brand Identity</h3>
                            <p class="text-xs text-gray-500 mt-1 font-geist">Visual systems that tell your story</p>
                        </div>
                    </div>
                </div>