Responsive Services Section with Numbered Cards (Tailwind)

<section id="services" class="max-w-7xl sm:px-6 sm:mt-20 mt-8 mr-auto mb-8 ml-auto pr-4 pl-4 w-full max-w-5xl">
  <div
    class="relative overflow-hidden rounded-[40px] border border-white/20 bg-white shadow-[0_8px_30px_rgba(0,0,0,0.08)] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]">
    <div class="absolute inset-0 pointer-events-none">
      <div class="absolute inset-0 bg-gradient-to-b from-white/10 via-white/5 to-transparent"></div>
    </div>
    <div class="relative">
      <div class="flex border-white/10 border-b pt-6 pr-6 pb-6 pl-6 items-end justify-between">
        <h2 class="text-2xl sm:text-3xl text-gray-900 font-geist tracking-tighter">Services</h2>
        <div class="hidden sm:flex items-center gap-2">
          <a href="#"
            class="inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium tracking-tight text-gray-700 bg-gray-100 hover:bg-gray-200 border border-white/20">
            <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="download" class="lucide lucide-download w-3.5 h-3.5 stroke-1.5">
              <path d="M12 15V3"></path>
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              <path d="m7 10 5 5 5-5"></path>
            </svg>
            <span class="font-geist">Services Guide</span>
          </a>
        </div>
      </div>

      <!-- Service 1 -->
      <div class="p-6 sm:p-8 border-b border-white/10">
        <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"></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"></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"></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>

      <!-- Service 2 -->
      <div class="sm:p-8 border-black/5 border-t pt-6 pr-6 pb-6 pl-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">2</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"></path>
                </svg>
                <span class="font-geist">UI/UX Design &amp; Prototyping</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"></path>
                </svg>
                <span class="font-geist">Responsive Web Design</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"></path>
                </svg>
                <span class="font-geist">Mobile App Design</span>
              </li>
            </ul>

            <div class="mt-4 flex items-center gap-3">
              <div class="aspect-[16/10] w-28 sm:w-32 rounded-md overflow-hidden border border-white/20">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2787ba90-ce87-4cab-9679-6f97ebd85857_800w.jpg" alt="Website design mockups" class="w-full h-full object-cover">
              </div>
              <div class="aspect-[16/10] w-28 sm:w-32 rounded-md overflow-hidden border border-white/20">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ab172164-87bf-46ed-b6da-dcf1239c01d0_800w.jpg" alt="Mobile app interface" 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">Digital Design</h3>
            <p class="text-xs text-gray-500 mt-1 font-geist">User experiences that delight</p>
          </div>
        </div>
      </div>

      <!-- Service 3 -->
      <div class="sm:p-8 border-black/5 border-t pt-6 pr-6 pb-6 pl-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">3</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"></path>
                </svg>
                <span class="font-geist">Brand Strategy &amp; Positioning</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"></path>
                </svg>
                <span class="font-geist">Creative Campaign Development</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"></path>
                </svg>
                <span class="font-geist">Content Strategy &amp; Messaging</span>
              </li>
            </ul>

            <div class="mt-4 flex items-center gap-3">
              <div class="aspect-[16/10] w-32 sm:w-40 rounded-md overflow-hidden border border-white/20">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e1b23bf1-d8af-47dc-a35a-70e03d8cf014_800w.jpg" alt="Strategy workshop" class="w-full h-full object-cover">
              </div>
              <div class="aspect-[16/10] w-32 sm:w-40 rounded-md overflow-hidden border border-white/20">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b876c14b-5b29-40a0-b0db-bb155921890a_800w.jpg" alt="Creative brainstorming" 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">Strategy</h3>
            <p class="text-xs text-gray-500 mt-1 font-geist">Strategic thinking meets creativity</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>