feat: improve content card sizing and spacing

- Reduced card width from 200/280px to 140/180px
- Increased gap between cards from 8px to 32px (gap-8)
- Added vertical padding (py-4) to content rows
- Made title text smaller and responsive
- Hide description on mobile for cleaner look

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/ContentRow.vue

@@ -19,13 +19,13 @@
       <!-- Content Slider -->
       <div 
         ref="sliderRef"
-        class="flex gap-2 overflow-x-auto scrollbar-hide scroll-smooth px-6"
+        class="flex gap-8 overflow-x-auto scrollbar-hide scroll-smooth px-6 py-4"
         @scroll="handleScroll"
       >
         <div
           v-for="content in contents"
           :key="content.id"
-          class="content-card flex-shrink-0 w-[200px] md:w-[280px]"
+          class="content-card flex-shrink-0 w-[140px] md:w-[180px]"
           @click="$emit('content-click', content)"
         >
           <img 
@@ -35,8 +35,8 @@
             loading="lazy"
           />
           <div class="mt-2">
-            <h3 class="text-sm font-medium text-white truncate">{{ content.title }}</h3>
+            <h3 class="text-xs md:text-sm font-medium text-white truncate">{{ content.title }}</h3>
-            <p class="text-xs text-white/60 truncate">{{ content.description }}</p>
+            <p class="text-xs text-white/60 truncate hidden md:block">{{ content.description }}</p>
           </div>
         </div>
       </div>

src/views/Browse.vue

@@ -92,7 +92,7 @@
 
     <!-- Content Rows -->
     <section class="relative pt-8 pb-20">
-      <div class="mx-auto px-8 space-y-12" style="max-width: 75%;">
+      <div class="mx-auto space-y-12" style="max-width: 75%;">
 
         <!-- Featured Films -->
         <ContentRow