Adaptive Media Engine Feature Card

<article class="group relative overflow-hidden rounded-3xl border border-neutral-800 bg-neutral-900 shadow-sm transition-shadow hover:shadow-md">
  <div class="p-6 sm:p-8">
    <div class="relative h-56 sm:h-64 rounded-2xl bg-gradient-to-b from-neutral-900 to-neutral-800 ring-1 ring-inset ring-white/5">
      <div class="absolute right-3 sm:right-6 top-4 sm:top-6 w-[78%] h-[68%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm">
        <div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
          <span class="text-[10px] sm:text-xs tracking-widest text-neutral-400">ORIGINAL</span>
          <span class="h-2 w-24 rounded bg-neutral-800"></span>
        </div>
        <div class="p-2">
          <svg viewBox="0 0 300 90" class="w-full h-20 sm:h-24 text-neutral-700">
            <defs>
              <pattern id="dots1" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
                <circle cx="1" cy="1" r="1" fill="currentColor"></circle>
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#dots1)"></rect>
            <polyline points="0,70 30,65 60,50 90,60 120,40 150,35 180,50 210,30 240,45 270,25 300,40" fill="none" stroke="#6B7280" stroke-width="2" stroke-linecap="round"></polyline>
          </svg>
        </div>
      </div>
      <div class="absolute left-6 sm:left-12 bottom-10 sm:bottom-12 w-[62%] h-[52%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm">
        <div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
          <span class="text-[10px] sm:text-xs tracking-widest text-neutral-400">1440PX</span>
          <span class="h-2 w-16 rounded bg-neutral-800"></span>
        </div>
        <div class="p-2">
          <svg viewBox="0 0 260 80" class="w-full h-16 sm:h-20 text-neutral-700">
            <defs>
              <pattern id="dots2" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
                <circle cx="1" cy="1" r="1" fill="currentColor"></circle>
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#dots2)"></rect>
            <polyline points="0,60 20,55 40,40 60,48 80,30 100,28 120,40 140,24 160,38 180,20 200,35 220,25 240,28 260,22" fill="none" stroke="#6B7280" stroke-width="2" stroke-linecap="round"></polyline>
          </svg>
        </div>
      </div>
      <div class="absolute left-3 sm:left-6 bottom-3 sm:bottom-4 w-[38%] h-[44%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm">
        <div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
          <span class="text-[10px] sm:text-xs tracking-widest text-neutral-400">375PX</span>
          <span class="h-2 w-10 rounded bg-neutral-800"></span>
        </div>
        <div class="p-2">
          <svg viewBox="0 0 180 70" class="w-full h-14 sm:h-16 text-neutral-700">
            <defs>
              <pattern id="dots3" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
                <circle cx="1" cy="1" r="1" fill="currentColor"></circle>
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#dots3)"></rect>
            <polyline points="0,52 18,50 36,36 54,44 72,30 90,26 108,36 126,22 144,34 162,20 180,28" fill="none" stroke="#6B7280" stroke-width="2" stroke-linecap="round"></polyline>
          </svg>
        </div>
      </div>
    </div>
    <div class="mt-6 sm:mt-8">
      <div class="flex items-center gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 text-neutral-400">
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
          <circle cx="9" cy="9" r="2"></circle>
          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
        </svg>
        <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-neutral-100">Adaptive Media Engine</h3>
      </div>
      <p class="mt-3 text-neutral-400 text-sm">Device‑aware resizing, modern formats, and edge caching deliver crisp images without extra work.</p>
      <div class="mt-4">
        <a href="#" class="inline-flex items-center gap-2 text-xs font-medium text-neutral-100 hover:text-neutral-300">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
            <path d="M5 12h14"></path>
            <path d="m12 5 7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</article>