Some updates to layout for heading

src/css/exceptions/color-scheme-picker.css

@@ -1,15 +1,13 @@
-header > * {
-	flex-grow: 1;
-}
 
 .color-scheme {
 	border: 0;
 	padding: 0;
 	display: flex;
 	gap: var(--space-size-xs);
-	flex-grow: 1;
-	justify-content: center;
-	justify-self: flex-end;
+	grid-column: auto/span 2;
+	justify-content: end;
+	width: 100%;
+	--grid-item-size: 20rem;
 
 	legend {
 		position:absolute;

src/css/exceptions/nav-container.css

@@ -0,0 +1,4 @@
+.nav-container {
+    --grid-item-size: clamp(30rem, 70vw, var(--screen-lg));
+    grid-column: auto / span 4;
+}

src/css/exceptions/site-title.css

@@ -3,6 +3,7 @@
   letter-spacing: clamp(-0.2rem,1vw,-0.5rem);
   line-height: 1;
   text-decoration: none;
+  place-self: start;
 
   &:hover, &:focus, &:focus-visible {
     outline: 0px transparent;

src/css/globals.css

@@ -153,12 +153,13 @@ nav {
 }
 
 header {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding-top: var(--space-size-s);
-    padding-bottom: var(--space-size-s);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-size, 10rem), 1fr));
+    grid-gap: 10px;
+    padding: var(--space-size-m);
+    place-items: center;
+    justify-content: center;
+    width: 100%;
 }
 
 p {

src/css/utilities/flex.css

@@ -1,3 +1,7 @@
 .space-between {
   justify-content: space-between;
 }
+
+.space-around {
+  justify-content: space-around;
+}