feat(Projects): refactor project list

src/components/Card.astro

@@ -8,6 +8,9 @@ const { className } = Astro.props;
 ---
 
 <div class:list={['card', 'vstack', className]}>
+  <div class="img-header">
+    <slot name="img-header" />
+  </div>
   <div class="title">
     <slot name="title" />
   </div>
@@ -21,7 +24,7 @@ const { className } = Astro.props;
   </div>
 </div>
 
-<style>
+<style lang="scss">
   .card {
     background-color: var(--prj-surface-2);
     color: var(--prj-surface-text);
@@ -30,14 +33,22 @@ const { className } = Astro.props;
     box-shadow: 5px 5px 5px 5px var(--prj-shadow);
 
     padding: var(--prj-spacing-2) var(--prj-spacing-3);
+
+    :global(a) {
+      text-decoration-line: none;
+    }
+
+    :global(a):hover {
+      text-decoration-line: underline;
+    }
   }
 
-  .card :global(a) {
-    text-decoration-line: none;
-  }
-
-  .card :global(a):hover {
-    text-decoration-line: underline;
+  .img-header {
+    :global(img) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
   }
 
   .title > :global(:last-child) {