Paper_Print_Media_Card

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-850 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl relative border-2 border-gray-100 dark:border-gray-700">
    <!-- Faint textured background to mimic paper -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-paper.png')] opacity-20 dark:opacity-5"></div>

    <div class="relative z-10 p-4 sm:p-6 md:p-8 lg:p-10 flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6">
      <!-- Image Section -->
      <div class="flex-shrink-0 w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 lg:w-56 lg:h-56 rounded-md overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/400/400?random=1" alt="Media thumbnail" class="w-full h-full object-cover transform transition-transform duration-300 hover:scale-105">
      </div>

      <!-- Content Section -->
      <div class="text-center sm:text-left flex-grow">
        <h2 class="text-xl sm:text-2xl md:text-3xl font-serif font-bold text-gray-800 dark:text-pink-100 mb-2 leading-tight">
          <span class="block">The Whispering Woods</span>
          <span class="block text-base sm:text-lg text-gray-500 dark:text-purple-300 font-sans italic">An Enchanting Journey</span>
        </h2>
        <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
          Dive into a world where ancient trees share their secrets and mystical creatures roam free. Join Elara on a quest to restore harmony to a forgotten realm.
        </p>
        
        <div class="flex items-center justify-center sm:justify-start text-gray-500 dark:text-gray-400 text-sm mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd" />
          </svg>
          <span>1h 45m</span>
          <span class="mx-2">•</span>
          <span>Fantasy, Adventure</span>
        </div>

        <div class="mt-4 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
          <button class="w-full sm:w-auto px-6 py-2 rounded-full border-2 border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-200 bg-pink-100 dark:bg-pink-700 dark:bg-opacity-20 hover:bg-pink-200 dark:hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-300 dark:focus:ring-pink-500 transition-all duration-200 text-sm font-semibold shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
            </svg>
            Watch Now
          </button>
          <button class="w-full sm:w-auto px-6 py-2 rounded-full border-2 border-purple-300 dark:border-purple-600 text-purple-700 dark:text-purple-200 bg-purple-100 dark:bg-purple-700 dark:bg-opacity-20 hover:bg-purple-200 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-purple-500 transition-all duration-200 text-sm font-semibold shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
            </svg>
            Details
          </button>
        </div>
      </div>
    </div>

    <!-- Decorative 'paper cut' edge -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-gray-100 to-transparent dark:from-gray-900 dark:to-transparent pointer-events-none">
      <div class="h-full w-full relative overflow-hidden">
        <div class="absolute inset-0 bg-[linear-gradient(to_right,transparent_1px,rgba(0,0,0,0.05)_1px,rgba(0,0,0,0.05)_2px,transparent_2px)] dark:bg-[linear-gradient(to_right,transparent_1px,rgba(255,255,255,0.02)_1px,rgba(255,255,255,0.02)_2px,transparent_2px)] bg-[length:10px_10px] transform -skew-y-1 -translate-y-px opacity-70"></div>
      </div>
    </div>
  </div>
</div>