card style changes

src/views/CollectionView/CollectionMerchCard.vue

@@ -10,20 +10,37 @@ defineProps({
 </script>
 
 <template>
-  <n-card :title="merch.name" class="responsive-card">
+  <n-card class="responsive-card">
+    <template #header>
+      <h3 class="card-title">{{ merch.name }}</h3>
+    </template>
     <template #cover>
       <div class="cover-wrapper">
         <BoxIcon />
       </div>
     </template>
-    Card Content
   </n-card>
 </template>
 
 <style scoped>
 .responsive-card {
-  max-width: 200px;
-  min-width: 180px;
+  width: 180px;
+  height: 240px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.card-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  white-space: normal;
 }
 
 .cover-wrapper {
@@ -40,5 +57,4 @@ defineProps({
   height: auto;
   max-width: 80%;
 }
-
 </style>