5 files changed, 18 insertions, 5 deletions
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index b250eb5..a043649 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -82,7 +82,8 @@
 }
 
 .search {
-  display: block;
+  display: flex;
+  place-content: center;
   width: var(--btn-size);
   height: var(--btn-size);
   background: none;
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
index 496044a..b5d098d 100644
--- a/src/components/Footer/Footer.module.scss
+++ b/src/components/Footer/Footer.module.scss
@@ -4,5 +4,5 @@
   place-items: center;
   place-content: center;
   gap: var(--spacing-xs);
-  padding: var(--spacing-md) 0;
+  padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md));
 }
diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
index 596f1d5..d732b99 100644
--- a/src/components/MainNav/MainNav.module.scss
+++ b/src/components/MainNav/MainNav.module.scss
@@ -75,7 +75,7 @@
       bottom: auto;
       left: auto;
       right: auto;
-      top: var(--btn-size);
+      top: calc(var(--btn-size) + var(--spacing-sm));
       z-index: unset;
       border-bottom-width: fun.convert-px(5);
       transform-origin: 50% -100%;
diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
index 18212a2..527a342 100644
--- a/src/components/Toolbar/Toolbar.module.scss
+++ b/src/components/Toolbar/Toolbar.module.scss
@@ -2,7 +2,6 @@
 @use "@styles/abstracts/mixins" as mix;
 
 .wrapper {
-  --toolbar-size: #{fun.convert-px(60)};
   --btn-size: #{fun.convert-px(50)};
 
   display: flex;
@@ -26,6 +25,8 @@
     }
 
     @include mix.dimensions("sm") {
+      --toolbar-size: auto;
+
       justify-content: flex-end;
       gap: var(--spacing-md);
       width: auto;
@@ -65,7 +66,7 @@
       width: fun.convert-px(500);
       left: unset;
       right: unset;
-      top: 200%;
+      top: 150%;
       bottom: unset;
       background: var(--color-bg-opacity);
       box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(3)
diff --git a/src/styles/base/_spacings.scss b/src/styles/base/_spacings.scss
index 512b597..74c6fa9 100644
--- a/src/styles/base/_spacings.scss
+++ b/src/styles/base/_spacings.scss
@@ -1,3 +1,5 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/variables" as var;
 @use "sass:math";
 
@@ -22,4 +24,13 @@
   --spacing-xl: clamp(#{var.spacing("lg")}, 1ex + 4vw, #{var.spacing("xl")});
   --spacing-2xl: clamp(#{var.spacing("xl")}, 1ex + 5vw, #{var.spacing("2xl")});
   --spacing-3xl: clamp(#{var.spacing("2xl")}, 1ex + 6vw, #{var.spacing("3xl")});
+  --toolbar-size: #{fun.convert-px(60)};
+}
+
+@include mix.media("screen") {
+  @include mix.dimensions("sm") {
+    :root {
+      --toolbar-size: 0;
+    }
+  }
 }