perf(Recipes): mejora visual de las tarjetas con las recetas

src/components/RecipeCard.vue

@@ -13,7 +13,7 @@
                 <div class="card-body flex-grow-1 d-flex flex-column">
                 <div class="card-body flex-grow-1 d-flex flex-column">
                     <div class="text-start">
                     <div class="text-start">
                         <h5 class="fw-bolder mb-3">{{ recipe.name }}</h5>
                         <h5 class="fw-bolder mb-3">{{ recipe.name }}</h5>
-                        <p class="fs-8">
+                        <p class="fs-8 card-text-description">
                             {{ recipe.description }}
                             {{ recipe.description }}
                         </p>
                         </p>
                     </div>
                     </div>
@@ -63,6 +63,16 @@ const toggleFavorite = async() => {
     box-shadow: 0 0 0 0.25rem rgba(121, 62, 108, 0.25); 
     box-shadow: 0 0 0 0.25rem rgba(121, 62, 108, 0.25); 
 }
 }
 
 
+.card-text-description {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6; /* Número de líneas antes de cortar */
+  line-clamp: 6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 3.8cm; /* Altura de ejemplo para 3 líneas */
+}
+
 .btn-more {
 .btn-more {
     border-color: #793E6C;
     border-color: #793E6C;
     color: #793E6C;
     color: #793E6C;

src/views/Recipes.vue

@@ -28,13 +28,15 @@
                 </div>
                 </div>
             </div>
             </div>
 
 
-            <div v-if="recipeStore.recipes.length" class="d-flex flex-wrap gap-3 justify-content-center">
-                <RecipeCard v-for="recipe in recipeStore.recipes" :key="recipe.id" :recipe="recipe"></RecipeCard>
+            <div v-if="recipeStore.recipes.length" class="row g-4 d-flex justify-content-center">
+                <div v-for="recipe in recipeStore.recipes" :key="recipe.id" class="col-md-7 col-lg-6 d-flex">
+                    <RecipeCard :recipe="recipe" />
+                </div>
             </div>
             </div>
             <div v-else class="text-center text-muted">
             <div v-else class="text-center text-muted">
                 No se encontraron recetas.
                 No se encontraron recetas.
             </div>
             </div>
-
+            
             <div class="d-flex justify-content-center mt-4">
             <div class="d-flex justify-content-center mt-4">
                 <nav aria-label="Page navigation">
                 <nav aria-label="Page navigation">
                     <ul class="pagination pagination-sm mb-0 pagination-custom">
                     <ul class="pagination pagination-sm mb-0 pagination-custom">