Remove wrapper-lg from mains

src/_includes/components/blog.njk

@@ -1,4 +1,4 @@
-<main class="wrapper-lg stack-xl">
+<main class="stack-xl">
     <h1>{{ title }}</h1>
 
     <aside class="inverse text-center">

src/_includes/eventcalendar.njk

@@ -2,7 +2,7 @@
 layout: "base.njk"
 ---
 
-<main class="wrapper-lg events">
+<main class="events">
     <article class="stack-lg">
         <h1 class="text-center">{{ title }}</h1>
         <div class="stack-lg">     

src/_includes/page.njk

@@ -3,7 +3,7 @@ layout: base.njk
 includeFA: true
 ---
 
-<main class="wrapper-lg stack-lg">
+<main class="stack-lg">
 	<h1 class="text-center">{{ title }}</h1>
 	<div class="wrapper-md stack-lg">
 		{{ content | safe }}

src/blogroll.html

@@ -2,7 +2,7 @@
 title: Blogroll
 layout: base.njk
 ---
-<main class="wrapper-lg stack-lg">
+<main class="stack-lg">
     <article>
         <h1 class="text-center">{{ title }}</h1>
         <div class="stack-lg">

src/css/exceptions/callout.css

@@ -2,7 +2,7 @@
     background-color: var(--color-callout-bg);
     border: 2px solid var(--color-callout-border);
     /* border-radius: 10px; */
-    color: var(--color-primary);
+    color: var(--color-callout-text, var(--color-primary));
     height: fit-content;
     padding: var(--space-size-2xs);
     text-align: center;
@@ -39,4 +39,10 @@
             margin: 0;
         }
     }
+
+    &[data-callout="warning"] {
+        --color-callout-bg: light-dark(var(--color-amber-400), var(--color-amber-800));
+        --color-callout-border: light-dark(var(--color-amber-600), var(--color-amber-600));
+        --color-callout-text: light-dark(var(--color-neutral-900), var(--color-neutral-200));
+    }
 }

src/saved-links.njk

@@ -2,7 +2,7 @@
 title: Saved links
 layout: base.njk
 ---
-<main class="wrapper-lg stack-lg">
+<main class="stack-lg">
 <h1>{{ title }}</h1>
 
 <p>