feat: restructure card layout to position author in bottom-left corner

- Move thumbnail to be next to text content instead of blocking author position
- Create card-content-header with thumbnail + text-content flex layout
- Position author name in bottom-left corner of card footer
- Update responsive design for new layout structure
- Maintain thumbnail functionality while fixing author positioning

src/styles/components/cards.css

@@ -96,11 +96,25 @@
 
 .card-layout {
   display: flex;
-  gap: 1rem;
+  flex-direction: column;
   padding: 1.25rem;
+  gap: 0.75rem;
+}
+
+.card-content-header {
+  display: flex;
+  gap: 1rem;
   align-items: flex-start;
 }
 
+.card-text-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
 .card-thumbnail {
   width: 80px;
   height: 80px;
@@ -144,12 +158,10 @@
 }
 
 .card-content {
-  padding: 0;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   flex: 1;
-  min-width: 0;
 }
 
 .card-content .bookmark-header {
@@ -267,6 +279,10 @@
   
   .card-layout {
     padding: 1rem;
+    gap: 0.5rem;
+  }
+  
+  .card-content-header {
     gap: 0.75rem;
   }
   
@@ -275,7 +291,7 @@
     height: 60px;
   }
   
-  .card-content {
+  .card-text-content {
     gap: 0.5rem;
   }
   
@@ -295,6 +311,10 @@
     gap: 0.5rem;
   }
   
+  .card-content-header {
+    gap: 0.5rem;
+  }
+  
   .card-thumbnail {
     width: 50px;
     height: 50px;