fix Alert title vertical spacing

Author: nemanjam

docs/working-notes/todo3.md

@@ -421,5 +421,6 @@ improve lighthouse, accessibility, aria attrs
 2 prerendered paginations, 3 and 5 items
 must export_ vars in .mdx or acor error, ask?
 define color themes
+:where() selector in my-prose not completely bypassing not-prose
 ```
 

src/pages/design/components.mdx

@@ -40,3 +40,8 @@ export const alerts = {
   </div>
 </>
 ))}
+
+#### title="My title"
+
+<Alert title="My title">Some text</Alert>
+

src/pages/design/styleguide.mdx

@@ -208,33 +208,23 @@ Most <mark>salamanders</mark> are <del>nighttime</del> nocturnal, and hunt for i
 ## Alerts
 
 <Alert variant="note">
-
 This is a note.
-
 </Alert>
 
 <Alert variant="info">
-
 This is some extra info.
-
 </Alert>
 
 <Alert variant="tip">
-
 There’s probably a hot tip here.
-
 </Alert>
 
 <Alert variant="warning">
-
 You should heed this warning.
-
 </Alert>
 
 <Alert variant="danger">
-
 A bit more serious than a warning.
-
 </Alert>
 
 ## YouTube

src/styles/components/alert.css

@@ -26,7 +26,8 @@
   }
 
   .alert__title {
-    @apply flex items-center gap-1 mt-2;
+    /* <p> has line-height: 1.7, h4 needs higher mt-1 */
+    @apply flex items-center gap-1 mt-1;
   }
   .alert__title--note {
     @apply text-slate-900 dark:text-slate-100;