Make definition lists responsive

src/assets/css/general.css

@@ -73,6 +73,7 @@ blockquote > * + :not([class]),
 
 button:hover { cursor: pointer; }
 details:focus { outline-offset: 0.2em; }
+video { width: 100%; }
 
 figure {
     margin-bottom: var(--sz-paragraph-margin);
@@ -109,12 +110,19 @@ pre > code { white-space: pre; }
 summary { cursor: pointer; }
 
 dl {
+    container-type: inline-size;
     display: grid;
-    gap: 1em;
+    gap: var(--sz-content-list-gap);
-    grid-template-columns: auto auto;
 }
 
 dt { font-weight: 700; }
-dd {grid-column-start: 2; }
+dd { margin-left: var(--sz-def-indent); }
+dd ul { padding-left: 1em; }
 
-video { width: 100%; }
+@container (min-width: 20rem) {
+    dl { grid-template-columns: 1fr 2fr; }
+    dd {
+        grid-column-start: 2;
+        margin-left: 0;
+    }
+}

src/assets/css/global.css

@@ -48,6 +48,7 @@
     --sz-navbar-ht: 4rem;
     --sz-external-link: 1.25em;
     --sz-content-list-gap: 0.7em;
+    --sz-def-indent: 1.5em;
 
     --ht-sticky-sidebar: 89vh;
 }

src/assets/css/utility.css

@@ -45,10 +45,10 @@ a > .inline-icon { padding-inline-end: .25em; }
 .email-encoded b { display: none; }
 
 .deflist-1col { grid-template-columns: unset; }
-* + .deflist-1col { margin-block-start: 1.5em; }
+* + .deflist-1col { margin-block-start: var(--sz-def-indent); }
 .deflist-1col dd {
     grid-column-start: unset;
-    margin-left: 1.5em;
+    margin-block-start: var(--sz-def-indent);
 }
 
 .hidden { display: none; }