Responsive Feature Cards Grid with Icons

<div class="mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="ring-1 ring-white/10 bg-white/5 rounded-2xl p-4">
    <div class="flex items-center gap-2">
      <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-[15px] h-[15px]" data-icon-replaced="true" data-lucide="message-circle" style="width: 15px; height: 15px; color: rgb(244, 244, 245);"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" class=""></path></svg>
      </span>
      <h4 class="text-sm font-medium text-white tracking-tight font-sans">Customer support</h4>
    </div>
    <p class="text-sm text-slate-300 mt-2 font-sans">Shared inboxes, tags, and SLAs in channels.</p>
  </div>
  <div class="ring-1 ring-white/10 bg-white/5 rounded-2xl p-4">
    <div class="flex items-center gap-2">
      <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-[15px] h-[15px]" data-icon-replaced="true" data-lucide="code" style="width: 15px; height: 15px; color: rgb(244, 244, 245);"><polyline points="16 18 22 12 16 6" class=""></polyline><polyline points="8 6 2 12 8 18" class=""></polyline></svg>
      </span>
      <h4 class="text-sm font-medium text-white tracking-tight font-sans">Engineering</h4>
    </div>
    <p class="text-sm text-slate-300 mt-2 font-sans">Incident channels, alerts, and on‑call flows.</p>
  </div>
  <div class="ring-1 ring-white/10 bg-white/5 rounded-2xl p-4">
    <div class="flex items-center gap-2">
      <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-[15px] h-[15px]" data-icon-replaced="true" data-lucide="grid-2x2" style="width: 15px; height: 15px; color: rgb(244, 244, 245);"><path d="M12 3v18" class=""></path><path d="M3 12h18" class=""></path><rect x="3" y="3" width="18" height="18" rx="2" class=""></rect></svg>
      </span>
      <h4 class="text-sm font-medium text-white tracking-tight font-sans">Design</h4>
    </div>
    <p class="text-sm text-slate-300 mt-2 font-sans">Threads for critiques with media previews.</p>
  </div>
  <div class="ring-1 ring-white/10 bg-white/5 rounded-2xl p-4">
    <div class="flex items-center gap-2">
      <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-[15px] h-[15px]" data-icon-replaced="true" data-lucide="chart-bar" style="width: 15px; height: 15px; color: rgb(244, 244, 245);"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M7 16h8" class=""></path><path d="M7 11h12" class=""></path><path d="M7 6h3" class=""></path></svg>
      </span>
      <h4 class="text-sm font-medium text-white tracking-tight font-sans">Sales</h4>
    </div>
    <p class="text-sm text-slate-300 mt-2 font-sans">Account rooms with notes and recordings.</p>
  </div>
</div>