Fix issue where logo and mobil menu button touch targets overlap.

assets/sass/_colors.scss

@@ -51,7 +51,7 @@ $colors: (
   autocomplete-select-bg: $blue,
 
   body-bg:                $white,
-  header-bg:              $brand,
+  header-bg:              $white,
   backdrop:               $grey-extra-light,
 
   mobile-menu:            $brand,

assets/sass/components/header/_header.scss

@@ -2,19 +2,18 @@
 
 .header,
 %header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gutters);
+  background-color: var(--color-header-bg);
+
   @include respond-to(s) {
-    display: flex;
+    flex-direction: row;
   }
 
   // Wrapping link for logo.
   &__logo {
-    @include respond-to(s) {
-      margin: 0 var(--gutters) 0 0;
-
-      @include rtl() {
-        margin: 0 0 0 var(--gutters);
-      }
-    }
+    width: fit-content;
   }
 
   // Logo image.

assets/sass/mobile.scss

@@ -56,7 +56,7 @@
     right: var(--gutters);
     margin: 0;
     font-weight: var(--fw-bold);
-    background-color: transparent;
+    background-color: var(--color-text-bg);
     color: var(--color-text);
     z-index: 22;
     border: 1px solid var(--color-border);