refactor: ♻️ migrate trait compontent to css grid

src/components/traits.webc

@@ -1,10 +1,8 @@
 <div class="trait-list">
   <div class="trait" webc:for="trait of traits">
     <div class="icon-box"><icon :icon="trait.icon" webc:nokeep></icon></div>
-    <div>
-      <p class="type" @text="trait.type"></p>
-      <p class="text" @text="trait.text"></p>
-    </div>
+    <p class="type" @text="trait.type"></p>
+    <p class="text" @text="trait.text"></p>
   </div>
 </div>
 
@@ -19,20 +17,19 @@
   }
 
   .trait {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    gap: 0.75em;
-
-    & > * {
-      flex: 1 0 0;
-    }
+    display: grid;
+    grid-template-areas:
+      'icon type'
+      'icon data';
+    grid-template-columns: auto 1fr;
+    column-gap: 0.75em;
+    justify-items: start;
 
     & .icon-box {
       --icon-size: 2em;
 
       position: relative;
-      flex: 0 1 auto;
+      grid-area: icon;
 
       width: var(--icon-size);
       height: var(--icon-size);
@@ -61,21 +58,18 @@
     & svg {
       width: 100%;
       height: 100%;
-      padding: 0.625em;
+      padding: 0.5em;
     }
 
     & p {
       margin-block: 0;
-
-      & + p {
-        margin-block: 0.75em 0;
-      }
     }
 
     & .type {
       font-size: 0.625em;
       color: var(--clr-heading-data);
       text-transform: uppercase;
+      grid-area: type;
     }
 
     & .text {
@@ -83,6 +77,7 @@
       margin-block: 0;
       margin-inline: 0;
       color: var(--clr-text);
+      grid-area: data;
     }
   }
 </style>