Responsive Feature Card with Image and Footer

<article class="relative overflow-hidden sm:rounded-3xl col-span-2 md:col-span-3 lg:col-span-4 min-h-[220px] sm:min-h-[280px] md:min-h-[500px] flex flex-col bg-zinc-950 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d30527df-7416-4ead-affa-cf9a2d9e3729_800w.jpg)] bg-cover border-zinc-900 border rounded-2xl pt-5 pr-5 pb-5 pl-5 w-full max-w-lg">
      <div class="flex items-center justify-between text-zinc-300">
        <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="arrow-down" class="lucide lucide-arrow-down w-4 h-4"><path d="M12 5v14" class=""></path><path d="m19 12-7 7-7-7" class=""></path></svg></div>
      <div class="mt-auto text-zinc-400 text-sm">
        smart infrastructure
      </div>
    </article>