Responsive Feature Card Grid with Icons

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 max-w-5xl">
  <!-- Card A -->
  <section
    class="relative overflow-hidden rounded-3xl border border-white/10 bg-[#0b2421] p-6 md:p-8 lg:col-span-2 hover:border-lime-400/30 hover:bg-[#0d2825] transition">
    <div class="absolute inset-0 opacity-[0.12]">
      <svg class="h-full w-full" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs class="">
          <pattern id="gridA" width="24" height="24" patternUnits="userSpaceOnUse" class="">
            <path d="M24 0H0V24" stroke="#a3e635" stroke-opacity="0.25" stroke-width="0.5" class=""></path>
          </pattern>
        </defs>
        <rect width="400" height="300" fill="url(#gridA)" class=""></rect>
        <circle cx="60" cy="90" r="2" fill="#a3e635" class=""></circle>
        <circle cx="210" cy="60" r="2" fill="#a3e635" class=""></circle>
        <circle cx="320" cy="140" r="2" fill="#a3e635" class=""></circle>
        <path d="M50 210C100 160 170 170 220 130C270 90 320 100 350 70" stroke="#a3e635" stroke-opacity="0.35"
          stroke-width="1.2" fill="none" class=""></path>
      </svg>
    </div>
    <div class="relative z-10">
      <div
        class="mb-5 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-lime-500/10 ring-1 ring-lime-400/30">
        <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="globe-2"
          class="lucide lucide-globe-2 h-5 w-5 text-lime-400 stroke-[1.5]">
          <path d="M21.54 15H17a2 2 0 0 0-2 2v4.54" class=""></path>
          <path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17" class="">
          </path>
          <path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05" class=""></path>
          <circle cx="12" cy="12" r="10" class=""></circle>
        </svg>
      </div>
      <h3 class="text-xl md:text-2xl tracking-tight font-geist" style="">One
        platform.<br><span class="text-lime-400 font-geist" style="">Global operations.</span></h3>
      <p class="mt-3 text-sm md:text-base text-slate-400 font-geist">
        Unify orders, shipping, and returns in a single console to cut costs and ship faster.
      </p>
    </div>
  </section>

  <!-- Card B (Large) -->
  <section
    class="relative overflow-hidden rounded-3xl border border-white/10 bg-[#0b2421] p-6 md:p-8 lg:col-span-4 hover:border-lime-400/30 hover:bg-[#0d2825] transition">
    <div class="absolute inset-0 opacity-[0.09]">
      <svg class="h-full w-full" viewBox="0 0 800 300" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs class="">

        </defs>
        <rect x="0" y="0" width="800" height="300" fill="none" class=""></rect>
        <path
          d="M20 160C60 90 140 90 200 150C235 185 270 185 315 150C370 107 430 120 480 165C520 200 560 200 610 165C660 130 700 140 780 110"
          stroke="url(#fadeLine)" stroke-width="2" stroke-linecap="round" class=""></path>
        <g stroke="#a3e635" stroke-opacity="0.25" class="">
          <path d="M0 40H800M0 80H800M0 120H800M0 160H800M0 200H800M0 240H800" class=""></path>
          <path d="M80 0V300M160 0V300M240 0V300M320 0V300M400 0V300M480 0V300M560 0V300M640 0V300M720 0V300" class="">
          </path>
        </g>
      </svg>
    </div>
    <div class="relative z-10">
      <div
        class="mb-5 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-lime-500/10 ring-1 ring-lime-400/30">
        <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="package"
          class="lucide lucide-package h-5 w-5 text-lime-400 stroke-[1.5]">
          <path
            d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"
            class=""></path>
          <path d="M12 22V12" class=""></path>
          <polyline points="3.29 7 12 12 20.71 7" class=""></polyline>
          <path d="m7.5 4.27 9 5.15" class=""></path>
        </svg>
      </div>
      <h3 class="text-xl md:text-2xl tracking-tight font-geist" style="">Sell without
        borders.<br><span class="text-lime-400 font-geist" style="">Grow beyond limits.</span></h3>
      <p class="mt-3 text-sm md:text-base text-slate-400 max-w-2xl font-geist">
        We remove operational friction so expansion is a strategy, not a headache.
      </p>
      <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
        <div
          class="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 p-3 hover:border-lime-400/30 transition">
          <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="ship"
            class="lucide lucide-ship h-4 w-4 text-lime-400 stroke-[1.5]">
            <path d="M12 10.189V14" class=""></path>
            <path d="M12 2v3" class=""></path>
            <path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6" class=""></path>
            <path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"
              class=""></path>
            <path
              d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"
              class=""></path>
          </svg>
          <p class="text-sm text-slate-300 font-geist">Global shipping</p>
        </div>
        <div
          class="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 p-3 hover:border-lime-400/30 transition">
          <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="shield-check" class="lucide lucide-shield-check h-4 w-4 text-lime-400 stroke-[1.5]">
            <path
              d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
              class=""></path>
            <path d="m9 12 2 2 4-4" class=""></path>
          </svg>
          <p class="text-sm text-slate-300 font-geist">Compliance</p>
        </div>
        <div
          class="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 p-3 hover:border-lime-400/30 transition">
          <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="wallet"
            class="lucide lucide-wallet h-4 w-4 text-lime-400 stroke-[1.5]">
            <path
              d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"
              class=""></path>
            <path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" class=""></path>
          </svg>
          <p class="text-sm text-slate-300 font-geist">Localized payments</p>
        </div>
        <div
          class="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 p-3 hover:border-lime-400/30 transition">
          <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="badge-check" class="lucide lucide-badge-check h-4 w-4 text-lime-400 stroke-[1.5]">
            <path
              d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
              class=""></path>
            <path d="m9 12 2 2 4-4" class=""></path>
          </svg>
          <p class="text-sm text-slate-300 font-geist">SLA-backed</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Card C -->
  <section
    class="relative overflow-hidden rounded-3xl border border-white/10 bg-[#0b2421] p-6 md:p-8 lg:col-span-2 hover:border-lime-400/30 hover:bg-[#0d2825] transition">
    <div class="absolute inset-0 opacity-[0.12]">
      <svg class="h-full w-full" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs class="">
          <pattern id="gridC" width="22" height="22" patternUnits="userSpaceOnUse" class="">
            <path d="M22 0H0V22" stroke="#a3e635" stroke-opacity="0.25" stroke-width="0.5" class=""></path>
          </pattern>
        </defs>
        <rect width="400" height="300" fill="url(#gridC)" class=""></rect>
        <path d="M40 230C110 180 180 80 350 120" stroke="#a3e635" stroke-opacity="0.35" stroke-width="1.2" fill="none"
          class=""></path>
        <circle cx="140" cy="150" r="3" fill="#a3e635" class=""></circle>
        <circle cx="260" cy="120" r="3" fill="#a3e635" class=""></circle>
        <circle cx="330" cy="140" r="3" fill="#a3e635" class=""></circle>
      </svg>
    </div>
    <div class="relative z-10">
      <div
        class="mb-5 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-lime-500/10 ring-1 ring-lime-400/30">
        <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="satellite"
          class="lucide lucide-satellite h-5 w-5 text-lime-400 stroke-[1.5]">
          <path d="m13.5 6.5-3.148-3.148a1.205 1.205 0 0 0-1.704 0L6.352 5.648a1.205 1.205 0 0 0 0 1.704L9.5 10.5"
            class=""></path>
          <path d="M16.5 7.5 19 5" class=""></path>
          <path d="m17.5 10.5 3.148 3.148a1.205 1.205 0 0 1 0 1.704l-2.296 2.296a1.205 1.205 0 0 1-1.704 0L13.5 14.5"
            class=""></path>
          <path d="M9 21a6 6 0 0 0-6-6" class=""></path>
          <path
            d="M9.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l4.296-4.296a1.205 1.205 0 0 0 0-1.704l-2.296-2.296a1.205 1.205 0 0 0-1.704 0z"
            class=""></path>
        </svg>
      </div>
      <h3 class="text-xl md:text-2xl tracking-tight font-geist" style="">International
        logistics<br><span class="text-lime-400 font-geist" style="">made simple.</span></h3>
      <p class="mt-3 text-sm md:text-base text-slate-400 font-geist">
        Deliver anywhere with optimized routing, transparent tracking, and reliable SLAs.
      </p>
    </div>
  </section>

  <!-- Card D -->
  <section
    class="relative overflow-hidden rounded-3xl border border-white/10 bg-[#0b2421] p-6 md:p-8 lg:col-span-2 hover:border-lime-400/30 hover:bg-[#0d2825] transition">
    <div class="absolute inset-0 opacity-[0.10]">
      <svg class="h-full w-full" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs class="">
          <pattern id="dotsD" width="20" height="20" patternUnits="userSpaceOnUse" class="">
            <circle cx="1" cy="1" r="1" fill="#a3e635" fill-opacity="0.25" class=""></circle>
          </pattern>
        </defs>
        <rect width="400" height="300" fill="url(#dotsD)" class=""></rect>
        <circle cx="200" cy="150" r="70" stroke="#a3e635" stroke-opacity="0.35" stroke-width="1.2" fill="none" class="">
        </circle>
        <circle cx="200" cy="150" r="36" stroke="#a3e635" stroke-opacity="0.45" stroke-width="1.2" fill="none" class="">
        </circle>
        <circle cx="200" cy="150" r="4" fill="#a3e635" class=""></circle>
      </svg>
    </div>
    <div class="relative z-10">
      <div
        class="mb-5 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-lime-500/10 ring-1 ring-lime-400/30">
        <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="sparkles"
          class="lucide lucide-sparkles h-5 w-5 text-lime-400 stroke-[1.5]">
          <path
            d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
            class=""></path>
          <path d="M20 2v4" class=""></path>
          <path d="M22 4h-4" class=""></path>
          <circle cx="4" cy="20" r="2" class=""></circle>
        </svg>
      </div>
      <h3 class="text-xl md:text-2xl tracking-tight font-geist" style="">Smart
        returns.<br><span class="text-lime-400 font-geist" style="">Happier customers.</span></h3>
      <p class="mt-3 text-sm md:text-base text-slate-400 font-geist">
        Offer convenient portals, dynamic policies, and instant credit to boost loyalty.
      </p>
    </div>
  </section>

  <!-- Card E -->
  <section
    class="relative overflow-hidden rounded-3xl border border-white/10 bg-[#0b2421] p-6 md:p-8 lg:col-span-2 hover:border-lime-400/30 hover:bg-[#0d2825] transition">
    <div class="absolute inset-0 opacity-[0.12]">
      <svg class="h-full w-full" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs class="">
          <pattern id="gridE" width="24" height="24" patternUnits="userSpaceOnUse" class="">
            <path d="M24 0H0V24" stroke="#a3e635" stroke-opacity="0.2" stroke-width="0.5" class=""></path>
          </pattern>
        </defs>
        <rect width="400" height="300" fill="url(#gridE)" class=""></rect>
        <path d="M20 180C60 120 120 180 160 160C200 140 230 150 260 120C290 90 320 120 360 110" stroke="#a3e635"
          stroke-opacity="0.45" stroke-width="1.6" fill="none" class=""></path>
      </svg>
    </div>
    <div class="relative z-10">
      <div
        class="mb-5 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-lime-500/10 ring-1 ring-lime-400/30">
        <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="rotate-ccw"
          class="lucide lucide-rotate-ccw h-5 w-5 text-lime-400 stroke-[1.5]">
          <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" class=""></path>
          <path d="M3 3v5h5" class=""></path>
        </svg>
      </div>
      <h3 class="text-xl md:text-2xl tracking-tight font-geist" style="">Instant refunds &amp;
        exchanges.<br><span class="text-lime-400 font-geist" style="">Zero risk.</span></h3>
      <p class="mt-3 text-sm md:text-base text-slate-400 font-geist">
        Real‑time eligibility checks ensure seamless outcomes with fewer support tickets.
      </p>
    </div>
  </section>
</div>