Promo and Tech Specs Feature Grid

<div
  class="z-10 md:px-12 grid grid-cols-1 lg:grid-cols-3 gap-6 reveal delay-200 max-w-[1800px] mr-auto ml-auto pr-6 pl-6 relative gap-x-6 gap-y-6">

  <!-- Feature Card 1: 2023 Promo -->
  <div
    class="overflow-hidden group hover:-translate-y-1 transition-transform duration-300 text-[#655853] bg-white h-80 rounded-[2.5rem] pt-8 pr-8 pb-8 pl-8 relative">
    <!-- Number Detail 03 -->
    <span class="absolute top-8 right-8 text-[#655853]/30 font-oswald text-sm font-medium tracking-widest">03 // PROMO</span>

    <div class="relative z-10 flex flex-col h-full justify-between max-w-[60%]">
      <div class="">
        <div class="w-12 h-12 bg-[#F5F5F5] rounded-full flex items-center justify-center mb-6 text-[#655853]">
          <iconify-icon icon="solar:play-circle-bold-duotone" width="28"></iconify-icon>
        </div>
        <p class="font-semibold text-lg leading-tight mb-2">Feel the comfort and quality in one breath</p>
      </div>
      <h3 class="text-5xl font-bold text-[#1A1A1A] font-oswald" style="">2024</h3>
    </div>

    <!-- Masked Image -->
    <div class="absolute right-0 bottom-0 w-1/2 h-full z-0">
      <div class="z-10 bg-gradient-to-r from-white via-white/20 to-transparent absolute top-0 right-0 bottom-0 left-0">
      </div>
      <img src="https://images.unsplash.com/photo-1483721310020-03333e577078?q=80&amp;w=1000&amp;auto=format&amp;fit=crop" class="w-full h-full object-cover grayscale opacity-90 group-hover:grayscale-0 transition-all duration-500" alt="Runner">
    </div>
  </div>

  <!-- Feature Card 2: Tech Specs (Darker) -->
  <div
    class="lg:col-span-2 bg-[#4E433F] rounded-[2.5rem] p-8 md:p-12 flex flex-col md:flex-row gap-12 items-start md:items-center relative overflow-hidden border border-white/5">
    <!-- Vertical Line Decor inside card -->
    <div class="absolute left-1/2 top-0 bottom-0 w-px bg-white/5 hidden md:block"></div>

    <!-- Sound Feature -->
    <div class="flex-1 relative z-10">
      <div
        class="w-16 h-16 border border-white/10 rounded-2xl flex items-center justify-center mb-6 text-[#F8E7C0] bg-white/5">
        <iconify-icon icon="solar:soundwave-square-bold-duotone" width="32"></iconify-icon>
      </div>
      <h4 class="text-2xl font-oswald font-semibold mb-3 text-white">Sound</h4>
      <p class="text-sm text-white/50 leading-relaxed font-medium">
        HD Stereo sound that you will want to hear. Bluetooth 5.0 provides faster and more stable wireless
        connection.
      </p>
    </div>

    <!-- Connection Feature -->
    <div class="flex-1 relative z-10">
      <div
        class="w-16 h-16 border border-white/10 rounded-2xl flex items-center justify-center mb-6 text-[#F8E7C0] bg-white/5">
        <iconify-icon icon="solar:link-circle-bold-duotone" width="32"></iconify-icon>
      </div>
      <h4 class="text-2xl font-oswald font-semibold mb-3 text-white">Connection</h4>
      <p class="text-sm text-white/50 leading-relaxed font-medium">
        Real wireless connection. After a simple one-touch setup, the T1C automatically turns on and is always
        connected.
      </p>
    </div>
  </div>
</div>