adjust .font-family-grid styles

argyleink · Jun 5, 2024 · 77c8a0a · 77c8a0a
1 parent 1c5e214
commit 77c8a0a
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/docsite/index.css b/docsite/index.css
@@ -1053,22 +1053,32 @@ pre[class*="language-"] {
 }
 
 .font-family-grid {
+  --grid-cols: repeat(9, minmax(3rem, 1fr));
+
   display: grid;
+  grid-template-columns: var(--grid-cols);
   gap: var(--size-2);
-  justify-items: flex-start;
 
-  & > div {
+  & > details {
+    grid-column: 1 / -1;
+  }
+
+  & > details > div {
     display: grid;
-    grid-template-columns: repeat(9, minmax(3rem, 1fr));
     place-items: center;
-    font-size: var(--font-size-5);
+    grid-template-columns: var(--grid-cols);
+    grid-column: 1 / -1;
     color: var(--text-1);
+    font-size: var(--font-size-5);
 
     @media (--md-n-below) {
-      grid-template-columns: repeat(6, minmax(2rem, 1fr));
       font-size: var(--font-size-3);
     }
   }
+
+  @media (--md-n-below) {
+    --grid-cols: repeat(6, minmax(2rem, 1fr));
+  }
 }
 
 #colors details h3 {