Responsive Destination Card Grid with Hover Effects

<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-32 gap-x-6 gap-y-6 m-8">

    <!-- Card 1 -->
    <div class="group relative h-[500px] rounded-md overflow-hidden bg-neutral-900 animate-in delay-100">
        <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&amp;w=800&amp;auto=format&amp;fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 opacity-60 group-hover:opacity-80" alt="Swiss Alps">
        <div
            class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent opacity-90 group-hover:opacity-60 transition-opacity duration-500">
        </div>

        <div
            class="absolute top-4 right-4 bg-black/30 backdrop-blur-sm border border-white/10 px-2 py-1 rounded text-[10px] font-mono text-neutral-300 uppercase">
            CHE — 46.8°N
        </div>

        <div
            class="absolute bottom-0 left-0 w-full p-6 transform translate-y-2 group-hover:translate-y-0 transition-transform duration-300">
            <div class="flex items-end justify-between border-t border-white/10 pt-4">
                <div class="">
                    <span class="text-orange-500 text-xs font-bold tracking-widest uppercase mb-1 block">Alpine</span>
                    <h3 class="text-xl font-medium text-white tracking-tight">Switzerland</h3>
                </div>
                <div
                    class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-all duration-300 hover:bg-white text-black hover:text-black">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4">
                        <path d="M7 7h10v10" class=""></path>
                        <path d="M7 17 17 7" class=""></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 2 -->
    <div class="group relative h-[500px] rounded-md overflow-hidden bg-neutral-900 animate-in delay-200">
        <img src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?q=80&amp;w=800&amp;auto=format&amp;fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 opacity-60 group-hover:opacity-80" alt="Iceland">
        <div
            class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent opacity-90 group-hover:opacity-60 transition-opacity duration-500">
        </div>

        <div
            class="absolute top-4 right-4 bg-black/30 backdrop-blur-sm border border-white/10 px-2 py-1 rounded text-[10px] font-mono text-neutral-300 uppercase">
            ISL — 64.9°N
        </div>

        <div
            class="absolute bottom-0 left-0 w-full p-6 transform translate-y-2 group-hover:translate-y-0 transition-transform duration-300">
            <div class="flex items-end justify-between border-t border-white/10 pt-4">
                <div class="">
                    <span class="text-orange-500 text-xs font-bold tracking-widest uppercase mb-1 block">Volcanic</span>
                    <h3 class="text-xl font-medium text-white tracking-tight">Highlands</h3>
                </div>
                <div
                    class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-all duration-300 hover:bg-white text-black hover:text-black">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4">
                        <path d="M7 7h10v10" class=""></path>
                        <path d="M7 17 17 7" class=""></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 3 -->
    <div class="group relative h-[500px] rounded-md overflow-hidden bg-neutral-900 animate-in delay-300">
        <img src="https://images.unsplash.com/photo-1507608869274-d3177c8bb4c7?q=80&amp;w=800&amp;auto=format&amp;fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 opacity-60 group-hover:opacity-80" alt="Turkey">
        <div
            class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent opacity-90 group-hover:opacity-60 transition-opacity duration-500">
        </div>

        <div
            class="absolute top-4 right-4 bg-black/30 backdrop-blur-sm border border-white/10 px-2 py-1 rounded text-[10px] font-mono text-neutral-300 uppercase">
            TUR — 38.6°N
        </div>

        <div
            class="absolute bottom-0 left-0 w-full p-6 transform translate-y-2 group-hover:translate-y-0 transition-transform duration-300">
            <div class="flex items-end justify-between border-t border-white/10 pt-4">
                <div>
                    <span class="text-orange-500 text-xs font-bold tracking-widest uppercase mb-1 block">Valley</span>
                    <h3 class="text-xl font-medium text-white tracking-tight">Cappadocia</h3>
                </div>
                <div
                    class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-all duration-300 hover:bg-white text-black hover:text-black">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4">
                        <path d="M7 7h10v10" class=""></path>
                        <path d="M7 17 17 7" class=""></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 4 -->
    <div class="group relative h-[500px] rounded-md overflow-hidden bg-neutral-900 animate-in delay-200">
        <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&amp;w=800&amp;auto=format&amp;fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 opacity-60 group-hover:opacity-80" alt="Dolomites">
        <div
            class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent opacity-90 group-hover:opacity-60 transition-opacity duration-500">
        </div>

        <div
            class="absolute top-4 right-4 bg-black/30 backdrop-blur-sm border border-white/10 px-2 py-1 rounded text-[10px] font-mono text-neutral-300 uppercase">
            ITA — 46.4°N
        </div>

        <div
            class="absolute bottom-0 left-0 w-full p-6 transform translate-y-2 group-hover:translate-y-0 transition-transform duration-300">
            <div class="flex items-end justify-between border-t border-white/10 pt-4">
                <div>
                    <span class="text-orange-500 text-xs font-bold tracking-widest uppercase mb-1 block">Peaks</span>
                    <h3 class="text-xl font-medium text-white tracking-tight">Dolomites</h3>
                </div>
                <div
                    class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-all duration-300 hover:bg-white text-black hover:text-black">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4">
                        <path d="M7 7h10v10" class=""></path>
                        <path d="M7 17 17 7" class=""></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

</section>