Медийная составляющая художественной фотографии

<div class="font-sans bg-amber-50 dark:bg-stone-900 text-stone-800 dark:text-amber-100 p-4 sm:p-8 md:p-12 min-h-screen">

  <!-- Retro/Vintage Header -->
  <header class="mb-8 md:mb-12 text-center relative">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-stone-700 dark:text-amber-200 drop-shadow-lg relative z-10">
      The Canvas of Light
    </h1>
    <p class="mt-2 text-lg sm:text-xl text-stone-600 dark:text-amber-300 relative z-10">
      A Collection of Visual Poetry
    </p>
    <!-- Artistic brush stroke effect -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full max-w-lg bg-gradient-to-br from-amber-200 to-orange-200 dark:from-stone-700 dark:to-orange-900 opacity-60 dark:opacity-40 rounded-full blur-3xl"></div>
  </header>

  <!-- Main grid for photo gallery -->
  <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-7xl mx-auto">

    <!-- Featured Photo Card 1 -->
    <div class="col-span-1 rounded-xl overflow-hidden shadow-xl transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl bg-amber-100/70 dark:bg-stone-800/70 border border-amber-200 dark:border-stone-700 backdrop-blur-sm">
      <div class="relative pb-2/3 overflow-hidden group">
        <img src="https://picsum.photos/id/1047/800/600" alt="Abstract watercolor mountain landscape" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <h3 class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Whispers of Dawn</h3>
        </div>
      </div>
      <div class="p-4">
        <p class="text-sm text-stone-600 dark:text-amber-300 mb-2">Landscape • Fine Art</p>
        <p class="text-stone-700 dark:text-amber-200 text-base line-clamp-2">A serene moment captured, blending the soft hues of dawn with the rugged peaks of nature.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-sm text-stone-500 dark:text-amber-400">Oct 23, 1978</span>
          <button class="px-3 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-stone-800 dark:text-amber-100 text-sm font-medium hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200">
            View Artwork
          </button>
        </div>
      </div>
    </div>

    <!-- Featured Photo Card 2 -->
    <div class="col-span-1 border border-amber-200 dark:border-stone-700 rounded-xl overflow-hidden shadow-xl transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl bg-amber-100/70 dark:bg-stone-800/70 backdrop-blur-sm">
      <div class="relative pb-2/3 overflow-hidden group">
        <img src="https://picsum.photos/id/1025/800/600" alt="Vintage portrait of a man, artistic filter" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <h3 class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Soulful Gaze</h3>
        </div>
      </div>
      <div class="p-4">
        <p class="text-sm text-stone-600 dark:text-amber-300 mb-2">Portrait • Candid</p>
        <p class="text-stone-700 dark:text-amber-200 text-base line-clamp-2">An intimate portrayal, capturing raw emotion and a timeless connection.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-sm text-stone-500 dark:text-amber-400">Sep 15, 1982</span>
          <button class="px-3 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-stone-800 dark:text-amber-100 text-sm font-medium hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200">
            View Artwork
          </button>
        </div>
      </div>
    </div>

    <!-- Unique Artistic Section (Larger on Desktop for complexity) -->
    <div class="lg:col-span-1 rounded-xl overflow-hidden shadow-xl bg-orange-200 dark:bg-stone-700 text-stone-800 dark:text-amber-100 p-6 md:p-8 flex flex-col justify-between border border-orange-300 dark:border-stone-600 relative overflow-hidden">
      <h3 class="text-2xl sm:text-3xl font-bold text-stone-700 dark:text-amber-100 drop-shadow-md mb-4 z-10">Explore the Palette</h3>
      <p class="text-base sm:text-lg mb-6 z-10">Dive into our curated collections, where every image tells a story, painted with light and shadow. Discover the depth of artistic expression.</p>
      
      <!-- Interactive element: Artist Profile -->
      <div class="flex items-center space-x-4 mb-6 z-10">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Artist's avatar" class="w-16 h-16 rounded-full border-4 border-orange-400 dark:border-stone-500 shadow-lg">
        <div>
          <p class="font-semibold text-lg">Eleanor Vance</p>
          <p class="text-sm text-stone-700 dark:text-amber-200">Master of Light</p>
        </div>
      </div>

      <button class="w-full py-3 rounded-full bg-orange-400 dark:bg-orange-800 text-stone-900 dark:text-amber-100 font-bold text-lg hover:bg-orange-500 dark:hover:bg-orange-900 transition-colors duration-200 shadow-md transform hover:scale-105 z-10">
        Follow the Artist
      </button>
      <!-- Watercolor blob background -->
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-orange-300 dark:bg-stone-600 opacity-60 dark:opacity-40 rounded-full blur-3xl transform rotate-45"></div>
      <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-amber-300 dark:bg-stone-500 opacity-60 dark:opacity-40 rounded-full blur-3xl transform -rotate-15"></div>
    </div>

    <!-- General Photo Card 3 -->
    <div class="col-span-1 rounded-xl border border-amber-200 dark:border-stone-700 overflow-hidden shadow-xl transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl bg-amber-100/70 dark:bg-stone-800/70 backdrop-blur-sm">
      <div class="relative pb-2/3 overflow-hidden group">
        <img src="https://picsum.photos/id/1069/800/600" alt="Vibrant street photography" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <h3 class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Urban Canvas</h3>
        </div>
      </div>
      <div class="p-4">
        <p class="text-sm text-stone-600 dark:text-amber-300 mb-2">Street • Abstract</p>
        <p class="text-stone-700 dark:text-amber-200 text-base line-clamp-2">The raw beauty of city life, captured in a candid and colorful brushstroke.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-sm text-stone-500 dark:text-amber-400">Apr 01, 1974</span>
          <button class="px-3 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-stone-800 dark:text-amber-100 text-sm font-medium hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200">
            View Artwork
          </button>
        </div>
      </div>
    </div>

    <!-- General Photo Card 4 (Another example) -->
    <div class="col-span-1 rounded-xl border border-amber-200 dark:border-stone-700 overflow-hidden shadow-xl transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl bg-amber-100/70 dark:bg-stone-800/70 backdrop-blur-sm">
      <div class="relative pb-2/3 overflow-hidden group">
        <img src="https://picsum.photos/id/1080/800/600" alt="Still life with artistic lighting" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <h3 class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Still Life Reverie</h3>
        </div>
      </div>
      <div class="p-4">
        <p class="text-sm text-stone-600 dark:text-amber-300 mb-2">Still Life • Studio</p>
        <p class="text-stone-700 dark:text-amber-200 text-base line-clamp-2">A thoughtful composition, exploring textures and light in a classic setup.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-sm text-stone-500 dark:text-amber-400">Dec 08, 1969</span>
          <button class="px-3 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-stone-800 dark:text-amber-100 text-sm font-medium hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200">
            View Artwork
          </button>
        </div>
      </div>
    </div>

    <!-- Call to action/Filter section on smaller screens, joins grid on larger -->
    <div class="col-span-1 rounded-xl border border-orange-300 dark:border-stone-600 overflow-hidden shadow-xl bg-orange-200 dark:bg-stone-700 text-stone-800 dark:text-amber-100 p-6 md:p-8 flex flex-col justify-center items-center text-center">
      <h3 class="text-xl sm:text-2xl font-bold mb-4">Refine Your View</h3>
      <p class="text-base text-stone-700 dark:text-amber-200 mb-6">Our extensive archives await your discovery. Filter by style, era, or artist.</p>
      <button class="w-full max-w-xs py-3 rounded-full bg-orange-400 dark:bg-orange-800 text-stone-900 dark:text-amber-100 font-bold text-lg hover:bg-orange-500 dark:hover:bg-orange-900 transition-colors duration-200 shadow-md transform hover:scale-105">
        Browse Collections
      </button>
    </div>

  </section>

  <!-- Footer with subtle artistic elements -->
  <footer class="mt-12 md:mt-16 text-center text-stone-600 dark:text-amber-300 relative z-10">
    <p class="text-sm">&copy; 2023 Artistic Lens. All rights reserved.</p>
    <!-- Subtle watercolor splash -->
    <div class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-48 h-16 bg-amber-200 dark:bg-stone-700 opacity-60 dark:opacity-40 rounded-full blur-2xl transform -skew-x-12"></div>
  </footer>

</div>