Gaming Feature Highlight

<div class="font-sans antialiased bg-stone-100 text-stone-900 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-12 items-center">

    <!-- Main Feature Card -->
    <div class="md:col-span-1 lg:col-span-2 bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
      <img src="https://picsum.photos/1200/600?random=1" alt="Epic Game Scene" class="w-full h-60 sm:h-80 md:h-96 object-cover object-center" loading="lazy">
      <div class="p-6 sm:p-8 lg:p-10">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight tracking-tight mb-4 text-stone-900 dark:text-stone-50">
          Immersive Worlds. Unforgettable Adventures.
        </h2>
        <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 mb-6 lg:mb-8 leading-relaxed">
          Dive into breathtaking landscapes, embark on perilous quests, and redefine your gaming experience with unparalleled graphics and captivating storylines.
        </p>
        <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-semibold rounded-md shadow-sm text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition duration-200 ease-in-out dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-400 dark:focus:ring-offset-stone-900">
          Explore Games
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
    </div>

    <!-- Side Feature Cards Wrapper -->
    <div class="md:col-span-1 lg:col-span-1 flex flex-col gap-6 md:gap-8">

      <!-- Smaller Feature Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img src="https://picsum.photos/600/300?random=2" alt="Multiplayer" class="w-full h-36 object-cover object-center" loading="lazy">
        <div class="p-5">
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50">
            Connect Global Gamers
          </h3>
          <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-snug">
            Join millions worldwide in competitive and cooperative play. Build alliances, conquer rivals.
          </p>
        </div>
      </div>

      <!-- Smaller Feature Card 2 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img src="https://picsum.photos/600/300?random=3" alt="Exclusive Content" class="w-full h-36 object-cover object-center" loading="lazy">
        <div class="p-5">
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50">
            Exclusive Content Unlocked
          </h3>
          <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-snug">
            Access unique in-game items, early betas, and member-only events. Enhance your journey.
          </p>
        </div>
      </div>

    </div>

  </div>
</div>