Art Deco Medical Video Player

<div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 font-serif p-4">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-lg border-2 border-gray-300 dark:border-gray-700 overflow-hidden relative group">
    
    <!-- Top Art Deco Border Element -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-r from-gray-700 via-gray-500 to-gray-700 dark:from-gray-300 dark:via-gray-400 dark:to-gray-300 z-10 opacity-75 group-hover:opacity-100 transition-opacity duration-300">
      <div class="flex h-full">
        <div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform skew-x-12 -ml-2"></div>
        <div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform skew-x-12 -ml-2"></div>
        <div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform skew-x-12 -ml-2"></div>
        <div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform skew-x-12 -ml-2"></div>
      </div>
    </div>

    <div class="p-4 sm:p-6 lg:p-8 pt-8 relative z-20">
      <header class="mb-6 text-center">
        <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2 tracking-wider uppercase">
          <span class="text-gray-600 dark:text-gray-400 mr-1">Medical</span> <span class="text-gray-900 dark:text-white">Procedure Overview</span>
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 italic">Understanding the Key Steps</p>
      </header>

      <div class="relative pb-[56.25%] h-0 mb-6 border border-gray-400 dark:border-gray-600 shadow-inner overflow-hidden">
        <!-- Placeholder for actual video embed, use a static image for visual representation only -->
        <img src="https://picsum.photos/800/450?gravity=center&blur=2" alt="Medical procedure video placeholder" class="absolute inset-0 w-full h-full object-cover filter brightness-75">
        <div class="absolute inset-0 flex items-center justify-center">
          <button class="relative z-10 p-4 rounded-full bg-gray-900 bg-opacity-70 dark:bg-gray-100 dark:bg-opacity-70 text-white dark:text-gray-800 hover:scale-110 transition-transform duration-300 transform motion-safe:ease-out ring-4 ring-gray-600 dark:ring-gray-400">
            <svg class="w-10 h-10 sm:w-12 sm:h-12" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z"/>
            </svg>
            <span class="sr-only">Play Video</span>
          </button>
        </div>
         <!-- Geometric Overlay for Video -->
        <div class="absolute inset-0 z-0 opacity-20 dark:opacity-30">
          <div class="grid grid-cols-4 grid-rows-4 w-full h-full">
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>

            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>

            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>

            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
          </div>
        </div>
      </div>

      <div class="text-center">
        <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
          This video provides a concise overview of the essential steps involved in a common medical procedure. For detailed information, please consult with a healthcare professional.
        </p>
        <p class="text-sm text-gray-500 dark:text-gray-500 mt-2">
          <time datetime="PT2M30S">Duration: 2:30</time>
        </p>
      </div>
    </div>

    <!-- Bottom Art Deco Border Element -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-r from-gray-700 via-gray-500 to-gray-700 dark:from-gray-300 dark:via-gray-400 dark:to-gray-300 z-10 opacity-75 group-hover:opacity-100 transition-opacity duration-300">
     <div class="flex h-full">
        <div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform -skew-x-12 -mr-2"></div>
        <div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform -skew-x-12 -mr-2"></div>
        <div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform -skew-x-12 -mr-2"></div>
        <div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform -skew-x-12 -mr-2"></div>
      </div>
    </div>
  </div>
</div>