@props([
'titulo' => 'Título del Card',
'descripcion' => 'Descripción del card horizontal.',
'imagen' => '',
'elementos' => [],
])

<div
    class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-lg flex flex-col md:flex-row overflow-hidden mb-10">
    <img src="{{ $imagen }}" alt="Imagen" class="w-full md:w-1/3 h-48 md:h-auto object-cover">
    <div class="p-6 flex-1">
        <h3 class="text-2xl font-semibold mb-2 dark:text-gray-200">{{ $titulo }}</h3>
        <p class="text-gray-600 mb-4 dark:text-gray-400">{{ $descripcion }}</p>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
            @foreach($elementos as $elemento)
            <div class="bg-gray-100 text-center py-2 rounded dark:bg-gray-600 dark:text-gray-300">{{ $elemento }}</div>
            @endforeach
        </div>
    </div>
</div>