Arreglo posts horizontales

src/components/ListadoPostsHorizontal.astro

@@ -1,61 +1,57 @@
 ---
 import { getCollection } from "astro:content";
-
 const posts = await getCollection("posts");
 // Selecciona 3 posts aleatorios
 const selectedPosts = posts.sort(() => Math.random() - 0.5).slice(0, 3);
 ---
-
 <div class="flex flex-wrap justify-center -mx-2">
-  {
-    selectedPosts.map((post) => (
-      <div class="w-full md:w-1/3 p-2 mb-4 animate-on-scroll">
-        <div class="card bg-base-100 shadow-lg h-full">
-          <div class="flex flex-wrap">
-            <div class="w-full md:w-1/2">
-              <div class="aspect-square overflow-hidden rounded-l">
-                <img src={post.data.imagen} class="object-cover w-full h-full" alt={post.data.titulo} />
-              </div>
-            </div>
-            <div class="w-full md:w-1/2">
-              <div class="card-body flex flex-col h-full p-4">
-                <h5 class="text-xl font-semibold mb-2">
-                  {post.data.titulo}
-                </h5>
-                <p class="text-base flex-grow post-content">
-                  {post.data.descripcion}
-                </p>
-                <a href={"/posts/" + post.id} class="btn btn-primary mt-auto">
-                  Ver detalles
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
+{
+selectedPosts.map((post) => (
+<div class="w-full md:w-1/3 p-2 mb-4 animate-on-scroll">
+  <div class="card relative overflow-hidden bg-gradient-to-b from-neutral/80 to-neutral/90 dark:from-base-100/80 dark:to-base-100/90 shadow-lg h-full">
+    <div class="absolute inset-0 z-0">
+      <div class="aspect-[16/9] overflow-hidden">
+        <img
+          src={post.data.imagen}
+          class="w-full h-full object-cover opacity-40 dark:opacity-50"
+          alt={post.data.titulo}
+        />
       </div>
-    ))
-  }
+      <div class="absolute inset-0 bg-black/40 dark:bg-black/30"></div>
+    </div>
+    <div class="relative z-10 flex flex-col p-6 h-full">
+      <h5 class="text-xl font-bold mb-3 text-white dark:text-base-content">
+        {post.data.titulo}
+      </h5>
+      <p class="text-base mb-4 text-white/90 dark:text-base-content/80 line-clamp-3">
+        {post.data.descripcion}
+      </p>
+      <a
+        href={"/posts/" + post.id}
+        class="btn btn-primary w-full mt-auto"
+      >
+        Leer post
+      </a>
+    </div>
+  </div>
+</div>
+ ))
+}
 </div>
-
 <style>
-  .post-content {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    flex-grow: 1;
-    overflow: hidden;
-    -webkit-line-clamp: 3;
-  }
-  .card {
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-  .card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
-  }
-  .btn-primary {
-    transition: transform 0.3s ease;
-  }
+.card {
+  transition: 
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+}
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15) !important;
+}
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 </style>