Brutalism_Photography_Maps_Component

<div class="p-4 sm:p-6 md:p-8 bg-violet-200 dark:bg-violet-950 text-violet-900 dark:text-violet-100 font-mono min-h-screen">
  <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold mb-6 sm:mb-8 tracking-tighter uppercase border-b-4 border-violet-900 dark:border-violet-400 pb-2">
    Photographic Locations // Map<span class="text-violet-700 dark:text-violet-400">.</span>Focus
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-10">
    <!-- Map Placeholder Section -->
    <div class="relative bg-violet-400 dark:bg-violet-800 border-4 border-violet-900 dark:border-violet-400 overflow-hidden group">
      <img src="https://picsum.photos/id/1080/800/600" alt="Abstract map visual" class="w-full h-64 sm:h-80 md:h-96 object-cover object-center transform transition-transform duration-500 group-hover:scale-105 saturate-150 brightness-75">
      <div class="absolute inset-0 bg-gradient-to-t from-violet-900 via-transparent to-transparent opacity-80 dark:from-violet-950 dark:opacity-90"></div>
      <div class="absolute bottom-0 left-0 p-4 sm:p-6 text-violet-100 tracking-tighter">
        <p class="text-xl sm:text-2xl font-bold uppercase mb-1 drop-shadow-lg">[Location: Unknown]</p>
        <p class="text-sm sm:text-base font-light opacity-80 drop-shadow-lg">Coordinates: [DATA REDACTED]</p>
      </div>
      <div class="absolute top-4 right-4 text-violet-900 dark:text-violet-200 bg-violet-200 dark:bg-violet-700 px-3 py-1 text-sm font-bold border-2 border-violet-900 dark:border-violet-400 uppercase">
        Interactive View Coming.
      </div>
    </div>

    <!-- Location List / Details -->
    <div class="bg-violet-400 dark:bg-violet-800 border-4 border-violet-900 dark:border-violet-400 p-4 sm:p-6 lg:p-8">
      <h3 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 border-b-2 border-violet-900 dark:border-violet-400 pb-1">Selected Locations // Shots.</h3>
      <ul class="space-y-4 sm:space-y-5">
        <li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[-2deg] hover:skew-x-0">
          <span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">01.</span>
          <div>
            <p class="font-bold text-lg sm:text-xl uppercase leading-tight">Urban Sprawl</p>
            <p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Downtown Concrete. 2023.</p>
          </div>
        </li>
        <li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[2deg] hover:skew-x-0">
          <span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">02.</span>
          <div>
            <p class="font-bold text-lg sm:text-xl uppercase leading-tight">Coastal Edge</p>
            <p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Sea Storm Horizon. 2022.</p>
          </div>
        </li>
        <li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[-2deg] hover:skew-x-0">
          <span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">03.</span>
          <div>
            <p class="font-bold text-lg sm:text-xl uppercase leading-tight">Desert Solitude</p>
            <p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Vast Sands, Empty Skies. 2020.</p>
          </div>
        </li>
        <li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[2deg] hover:skew-x-0">
          <span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">04.</span>
          <div>
            <p class="font-bold text-lg sm:text-xl uppercase leading-tight">Forest Veil</p>
            <p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Deep Woods Mystique. 2021.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <div class="mt-8 sm:mt-10 text-center">
    <button class="px-6 py-3 sm:px-8 sm:py-4 bg-violet-900 dark:bg-violet-400 text-violet-100 dark:text-violet-900 text-lg sm:text-xl font-bold uppercase border-4 border-violet-900 dark:border-violet-400 shadow-[8px_8px_0px_rgba(79,0,172,1)] dark:shadow-[8px_8px_0px_rgba(139,92,246,1)] transition-all duration-200 hover:shadow-[4px_4px_0px_rgba(79,0,172,1)] dark:hover:shadow-[4px_4px_0px_rgba(139,92,246,1)]">
      Explore More Locations // Get.Dirty
    </button>
  </div>
</div>