From b91e9f609a25afcf5fb1061f3d158d1fa9d41816 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 9 Apr 2025 19:13:07 +0200
Subject: [PATCH] refactor: :recycle: migrate character card to css grid

---
 src/components/card.webc | 38 +++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/card.webc b/src/components/card.webc
index b349a03..7330557 100644
--- a/src/components/card.webc
+++ b/src/components/card.webc
@@ -1,31 +1,36 @@
 <a class="character-card" :href="href" :class="char">
-  <slot name="image"></slot>
-  <section class="text">
+  <div class="image">
+    <slot name="image"></slot>
+  </div>
+  <div class="text">
     <slot name="title"></slot>
     <slot></slot>
-  </section>
+  </div>
 </a>
 
 <style>
   .character-card {
-    background-color: var(--clr-box-background);
-    border: var(--border-thin) solid var(--clr-box-border);
-    font-size: 0.875em;
-    border-radius: 1em;
-    overflow: hidden;
+    display: grid;
+    align-content: start;
 
+    font-size: 0.875em;
     color: inherit;
     text-decoration: none;
 
+    background-color: var(--clr-box-background);
+
+    border: var(--border-thin) solid var(--clr-box-border);
+    border-radius: 1em;
+
+    overflow: hidden;
+
     &:hover {
       img {
-        transform: scale(1.1);
+        scale: 1.1;
       }
     }
 
-    & picture {
-      display: flex;
-      align-items: center;
+    & .image {
       overflow: hidden;
       aspect-ratio: 3/2;
     }
@@ -34,8 +39,8 @@
       width: 100%;
       height: 100%;
       object-fit: cover;
-      transform: scale(1);
-      transition: transform 0.2s ease-in-out;
+      scale: 1;
+      transition: scale 0.2s ease-in-out;
     }
 
     & .text {
@@ -45,11 +50,10 @@
     }
 
     & h2 {
-      --heading-spacing: 0.5em;
       position: relative;
       font-size: 1.375rem;
-      margin-block: 0 var(--heading-spacing);
-      padding-block: 0 var(--heading-spacing);
+      margin-block: 0 0.5em;
+      padding-block: 0 0.5em;
 
       &::after {
         content: '';