fix: regressions in dl/dt/dd styling from dropping styled-compoents

The nested CSS in the original styled component got lost in ce02c5d, and this
restores it back

src/components/blocks/list/list.module.css

@@ -4,7 +4,9 @@ All styles to be migrated to Tailwind classes when convenient */
 .list-dt {
   font-weight: 500;
   margin: 0 0 10px;
-  @media (min-width: 40em) {
+}
+@media (min-width: 40em) {
+  .list-dt {
     min-width: 120px;
   }
 }
@@ -17,74 +19,77 @@ All styles to be migrated to Tailwind classes when convenient */
   margin-bottom: 20px;
   font-size: 16px;
   overflow-x: scroll;
+}
 
-  /**
-    * This :only-child directive is present to ensure that multiple lines are not shown in the situation
-    * where there is a <dl> inside a <div> that is selected based on language type in between two other divs, i.e.
-    * <dl>
-    *   <dt></dt>
-    *   <dd></dd>
-    * </dl>
-    * <div>
-    *   <dl>
-    *     <dt></dt>
-    *     <dd></dd>
-    *   </dl>
-    * </div>
-    * <dl>
-    *   <dt></dt>
-    *   <dd></dd>
-    * </dl>
-    */
-  :only-child {
-    margin-bottom: -1px;
-    margin-top: -21px;
-  }
+/**
+ * This :only-child directive is present to ensure that multiple lines are not shown in the situation
+ * where there is a <dl> inside a <div> that is selected based on language type in between two other divs, i.e.
+ * <dl>
+ *   <dt></dt>
+ *   <dd></dd>
+ * </dl>
+ * <div>
+ *   <dl>
+ *     <dt></dt>
+ *     <dd></dd>
+ *   </dl>
+ * </div>
+ * <dl>
+ *   <dt></dt>
+ *   <dd></dd>
+ * </dl>
+ */
+.list-dl:only-child {
+  margin-bottom: -1px;
+  margin-top: -21px;
+}
 
-  div {
-    display: contents;
-  }
-  dt,
-  dd {
-    border-bottom: 1px solid #e1e1e1;
-    height: 100%;
-    padding: 15px 20px 15px 0;
-    line-height: 1.5;
-  }
-  dt {
-    grid-column: 1;
-  }
-  dd > em:not(.italics):first-of-type {
-    background: #e1e1e1;
-    border-radius: 5px;
-    padding: 2px 5px;
-    display: block;
-    width: fit-content;
-    block-size: fit-content;
-    margin-bottom: 7px;
-    ::before {
-      content: '(default: ';
-    }
-    ::after {
-      content: ')';
-    }
-  }
-  dd > em.italics:last-of-type {
-    float: right;
-    display: block;
-    text-align: right;
-    font-size: 12px;
-    margin-top: 12px;
-  }
+.list-dl div {
+  display: contents;
+}
+.list-dl dt,
+.list-dl dd {
+  border-bottom: 1px solid #e1e1e1;
+  height: 100%;
+  padding: 15px 20px 15px 0;
+  line-height: 1.5;
+}
+.list-dl dt {
+  grid-column: 1;
+}
+.list-dl dd > em:not(.italics):first-of-type {
+  background: #e1e1e1;
+  border-radius: 5px;
+  padding: 2px 5px;
+  display: block;
+  width: fit-content;
+  block-size: fit-content;
+  margin: 7px 0;
+}
+.list-dl dd > em:not(.italics):first-of-type::before {
+  content: '(default: ';
+}
+.list-dl dd > em:not(.italics):first-of-type::after {
+  content: ')';
+}
+.list-dl dd > em.italics:last-of-type {
+  float: right;
+  display: block;
+  text-align: right;
+  font-size: 12px;
+  margin-top: 12px;
 }
 
+
 div.definition-list-row-styles {
   display: block;
   min-height: 35px;
   border-bottom: 1px solid #e1e1e1;
   overflow: auto;
   padding: 15px 0;
-  @media (min-width: 40em) {
+}
+@media (min-width: 40em) {
+  div.definition-list-row-styles {
     display: flex;
     padding: 0;
     width: 100%;