Latest Journal Articles List Section

<section class="border-white/10 border-t mb-20 pt-20 relative">
    <div class="grid md:grid-cols-12 gap-12 p-8">
        <!-- Left Column -->
        <div class="md:col-span-4 flex flex-col justify-between">
            <div class="">
                <h2 class="text-3xl font-medium tracking-tighter text-white mb-4">Latest from <br>the Journal</h2>
                <p class="text-neutral-500 text-sm leading-relaxed mb-8">
                    Field notes, photography tips, and stories from our team of explorers on the ground.
                </p>
                <a href="#"
                    class="inline-flex items-center text-orange-500 text-xs font-bold uppercase tracking-widest hover:text-orange-400 transition-colors">
                    View All Stories
                    <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-right" class="lucide lucide-arrow-right w-3 h-3 ml-2">
                        <path d="M5 12h14" class=""></path>
                        <path d="m12 5 7 7-7 7" class=""></path>
                    </svg>
                </a>
            </div>

            <div class="hidden md:block mt-12">
                <div class="w-full h-[1px] bg-gradient-to-r from-orange-500/50 to-transparent mb-4"></div>
                <span class="text-[10px] font-mono text-neutral-600">UPDATED DAILY</span>
            </div>
        </div>

        <!-- Right Column (List) -->
        <div class="md:col-span-8">
            <div class="flex flex-col">
                <!-- Item 1 -->
                <a href="#"
                    class="group flex flex-col md:flex-row md:items-center gap-6 py-8 border-b border-white/5 hover:bg-white/[0.02] transition-colors px-4 -mx-4 rounded-lg">
                    <div class="w-full md:w-48 aspect-video rounded bg-neutral-800 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1516483638261-f4dbaf036963?q=80&amp;w=400&amp;auto=format&amp;fit=crop" class="w-full h-full object-cover opacity-70 group-hover:scale-110 transition-transform duration-500" alt="Cinque Terre">
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="px-1.5 py-0.5 rounded border border-white/10 text-[10px] font-medium text-neutral-400 uppercase bg-white/5">Guide</span>
                            <span class="text-[10px] text-neutral-600 font-mono">OCT 12, 2024</span>
                        </div>
                        <h3
                            class="text-lg font-medium text-neutral-200 group-hover:text-orange-500 transition-colors mb-2">
                            Hidden Trails of Cinque Terre</h3>
                        <p class="text-sm text-neutral-500 line-clamp-2">Avoiding the crowds in Italy's most colorful
                            coastal villages by taking the high roads.</p>
                    </div>
                    <div
                        class="hidden md:block text-neutral-600 group-hover:translate-x-2 transition-transform duration-300">
                        <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-right" class="lucide lucide-arrow-right w-5 h-5">
                            <path d="M5 12h14" class=""></path>
                            <path d="m12 5 7 7-7 7" class=""></path>
                        </svg>
                    </div>
                </a>

                <!-- Item 2 -->
                <a href="#"
                    class="group flex flex-col md:flex-row md:items-center gap-6 py-8 border-b border-white/5 hover:bg-white/[0.02] transition-colors px-4 -mx-4 rounded-lg">
                    <div class="w-full md:w-48 aspect-video rounded bg-neutral-800 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?q=80&amp;w=400&amp;auto=format&amp;fit=crop" class="w-full h-full object-cover opacity-70 group-hover:scale-110 transition-transform duration-500" alt="Camping">
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="px-1.5 py-0.5 rounded border border-white/10 text-[10px] font-medium text-neutral-400 uppercase bg-white/5">Gear</span>
                            <span class="text-[10px] text-neutral-600 font-mono">SEP 28, 2024</span>
                        </div>
                        <h3
                            class="text-lg font-medium text-neutral-200 group-hover:text-orange-500 transition-colors mb-2">
                            Ultralight Packing for Autumn</h3>
                        <p class="text-sm text-neutral-500 line-clamp-2">Our essential checklist for staying warm
                            without the weight during shoulder season.</p>
                    </div>
                    <div
                        class="hidden md:block text-neutral-600 group-hover:translate-x-2 transition-transform duration-300">
                        <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-right" class="lucide lucide-arrow-right w-5 h-5">
                            <path d="M5 12h14" class=""></path>
                            <path d="m12 5 7 7-7 7" class=""></path>
                        </svg>
                    </div>
                </a>

                <!-- Item 3 -->
                <a href="#"
                    class="group flex flex-col md:flex-row md:items-center gap-6 py-8 hover:bg-white/[0.02] transition-colors px-4 -mx-4 rounded-lg">
                    <div class="w-full md:w-48 aspect-video rounded bg-neutral-800 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&amp;w=400&amp;auto=format&amp;fit=crop" class="w-full h-full object-cover opacity-70 group-hover:scale-110 transition-transform duration-500" alt="Lakes">
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="px-1.5 py-0.5 rounded border border-white/10 text-[10px] font-medium text-neutral-400 uppercase bg-white/5">Photo</span>
                            <span class="text-[10px] text-neutral-600 font-mono">SEP 15, 2024</span>
                        </div>
                        <h3
                            class="text-lg font-medium text-neutral-200 group-hover:text-orange-500 transition-colors mb-2">
                            Reflections: The Lake District</h3>
                        <p class="text-sm text-neutral-500 line-clamp-2">A photo essay capturing the moody atmosphere of
                            England's most dramatic landscapes.</p>
                    </div>
                    <div
                        class="hidden md:block text-neutral-600 group-hover:translate-x-2 transition-transform duration-300">
                        <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-right" class="lucide lucide-arrow-right w-5 h-5">
                            <path d="M5 12h14" class=""></path>
                            <path d="m12 5 7 7-7 7" class=""></path>
                        </svg>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>