Put Switcher over and next to Footer

Clever solution to keep it over but next to the title and not hide it

src/style/_base.scss

@@ -3,11 +3,20 @@
     // Sizes
     --container-width: #{$container-width};
 
+    // Offsets
+    --switcher-offset: 16px;
+
     // Animation
     --ease-quart: cubic-bezier(.165, .84, .44, 1);
     --ease-cubic: cubic-bezier(.785, .135, .15, .86);
     --ease-inout-quart: cubic-bezier(.76, 0, .24, 1);
 }
+@include bp (sm) {
+    :root {
+        // Offsets
+        --switcher-offset: clamp(20px, 3vw, 40px);
+    }
+}
 
 html {
     font: #{$base-font-size}/1.2 $font-sans;

src/style/molecules/_switcher.scss

@@ -1,16 +1,12 @@
 .switcher {
-    --offset: 16px;
     --button-size: 44px;
     $shadow-color: rgba(0, 0, 0, 0.05);
     position: fixed;
-    z-index: 101;
-    bottom: var(--offset);
-    left: var(--offset);
+    z-index: 100;
+    bottom: var(--switcher-offset);
+    left: var(--switcher-offset);
     pointer-events: none;
 
-    @include bp (sm) {
-        --offset: clamp(20px, 3vw, 40px);
-    }
     @include bp (md) {
         --button-size: 56px;
     }
@@ -165,4 +161,12 @@
             }
         }
     }
+
+    // Sticky (end of page)
+    &.is-sticky {
+        // background: red !important;
+        // position: sticky;
+        // bottom: 0;
+        // z-index: 100;
+    }
 }

src/style/organisms/_footer.scss

@@ -1,9 +1,10 @@
 .footer {
-    position: relative;
-    z-index: 200;
     background-color: $color-primary-darker;
     padding: 24px 0 40px;
 
+    @include bp (sm) {
+        padding: 24px 0;
+    }
     @include bp (md) {
         padding: 0;
         height: 120px;
@@ -28,7 +29,7 @@
         @include bp (sm) {
             grid-column: 2 / span 5;
             grid-row: 1;
-            margin: auto 0;
+            margin: auto 0 auto calc(var(--switcher-offset) + clamp(24px, 6vw, 8px));
         }
 
         :global(.site-title) {