refactor: ♻️ make better use of css grid and add responsiveness

src/components/colors.webc

@@ -1,63 +1,85 @@
 <ul class="character-colors">
   <li class="color" webc:for="color of colors">
     <div class="color-box" @attributes="({ style: `background-color: ${color.value}`})"></div>
-    <div class="content">
+    <p class="heading" @text="color.name"></p>
-      <p class="heading" @text="color.name"></p>
+    <p class="value" @text="color.value"></p>
-      <p class="text" @text="color.value"></p>
-    </div>
   </li>
 </ul>
 
 <style>
   .character-colors {
-    --color-box-size: 5.5em;
+    --columns: repeat(auto-fit, minmax(15em, 1fr));
+    --clearance: 0.25rem;
+    --color-box-size: calc(var(--clearance) * 14);
 
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
+    grid-template-columns: var(--columns);
-    gap: 1em;
+    gap: 0.75em;
 
     margin-block: 2em;
     padding: 0;
 
+    @media (min-width: 35em) {
+      --color-box-size: 5em;
+      --columns: repeat(auto-fit, minmax(8em, 1fr));
+    }
+
     & .color {
+      --areas: 'color heading' 'color value';
+      --rows: repeat(2, 1fr);
+      --columns: var(--color-box-size) 1fr;
+
       display: grid;
-      grid-template-columns: subgrid;
+      grid-template-areas: var(--areas);
-      grid-template-rows: 1.5fr 1fr;
+      grid-template-rows: var(--rows);
+      grid-template-columns: var(--columns);
 
       background-color: var(--clr-color-box-background);
 
       border: var(--border-thin) solid var(--clr-box-border);
       border-radius: 0.5em;
 
-      overflow: hidden;
+      overflow: clip;
+
+      @media (min-width: 35em) {
+        --areas: 'color' 'heading' 'value';
+        --rows: var(--color-box-size) 1fr auto;
+        --columns: 1fr;
+      }
     }
 
-    & .content {
+    & .color-box {
-      display: flex;
+      grid-area: color;
-      flex-flow: column nowrap;
+      width: 100%;
-      justify-content: space-between;
-      gap: 0.25em;
       height: 100%;
-      padding: 0.5em;
     }
 
-    & p {
+    & .heading,
-      margin-block: 0;
+    & .value {
+      text-align: left;
+      margin: 0;
+      padding-block: calc(var(--clearance) * 2);
+      padding-inline: calc(var(--clearance) * 2);
     }
 
     & .heading {
-      flex: 1 0 auto;
+      grid-area: heading;
+      align-self: start;
+
       font-size: 0.625em;
       line-height: 1.2;
       color: var(--clr-heading-data);
       text-transform: uppercase;
-      text-align: left;
+
     }
 
-    & .text {
+    & .value {
-      flex: 0 0 auto;
+      grid-area: value;
+      align-self: end;
+
       font-size: 0.75em;
-      margin-inline: 0;
+
+      padding-block: 0 calc(var(--clearance) * 2);
     }
   }
 </style>