Horizontal News Card

<div
        class="max-w-3xl flex flex-col md:flex-row items-stretch gap-8 bg-white p-8 rounded-[2.5rem] border border-slate-100 hover:shadow-[0_40px_100px_-20px_rgba(0,0,0,0.1)] transition-all group overflow-hidden">
        <div class="w-full md:w-64 h-64 md:h-auto rounded-[1.8rem] overflow-hidden shrink-0">
            <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=400"
                class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
        </div>
        <div class="flex flex-col justify-center py-4">
            <div class="mb-4">
                <span
                    class="text-[10px] font-black tracking-widest text-indigo-600 bg-indigo-50 px-4 py-1.5 rounded-full uppercase">Design</span>
            </div>
            <h3
                class="text-2xl font-bold text-slate-900 leading-tight mb-4 group-hover:text-indigo-600 transition-colors">
                Why spatial design is the next big shift for web developers.</h3>
            <p class="text-slate-500 text-sm leading-relaxed mb-8">The transition from 2D interfaces to spatial
                environments is closer than we think.</p>
            <div
                class="flex items-center gap-4 text-[10px] font-black text-slate-400 uppercase tracking-widest mt-auto">
                <div class="flex items-center gap-2">
                    <div class="w-1.5 h-1.5 rounded-full bg-slate-200"></div>
                    <span>Sarah Lee</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-1.5 h-1.5 rounded-full bg-slate-200"></div>
                    <span>5 min read</span>
                </div>
            </div>
        </div>
    </div>