update paddings

scss/_base.scss

@@ -39,12 +39,16 @@ h6 {
 #root {
   position: relative;
   box-sizing: border-box;
-  padding: 0 var(--spacing-xl);
+  padding: 0 var(--spacing-m);
   background-color: var(--secondary-surfaces);
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: flex-start;
+
+  @include media-breakpoint-up(lg) {
+    padding: 0 var(--spacing-xl);
+  }
 }
 
 #main-wrapper {
@@ -55,6 +59,10 @@ h6 {
   z-index: 1;
 }
 
+footer {
+  padding: 32px 16px !important;
+}
+
 main {
   box-sizing: border-box;
   width: 100%;

scss/components/_dots.scss

@@ -3,20 +3,25 @@
 #main-background {
   position: absolute;
   top: 0;
-  left: var(--spacing-xl);
-  width: calc(100% - var(--spacing-xl) * 2);
+  left: 16px;
+  width: calc(100% - 16px * 2);
   height: 100%;
   background-color: var(--main-background);
   z-index: 0;
   content: " ";
   display: block;
+
+  @include media-breakpoint-up(lg) {
+    left: var(--spacing-xl);
+    width: calc(100% - var(--spacing-xl) * 2);
+  }
 }
 
 #canvas-track {
   position: absolute;
   top: 0;
-  left: var(--spacing-xl);
-  width: calc(100% - var(--spacing-xl) * 2);
+  left: 16px;
+  width: calc(100% - 16px * 2);
   height: 150vh;
   z-index: 0;
   display: block;
@@ -25,10 +30,19 @@
   flex-flow: column;
   align-items: center;
   justify-content: flex-start;
+
+  @include media-breakpoint-up(lg) {
+    left: var(--spacing-xl);
+    width: calc(100% - var(--spacing-xl) * 2);
+  }
 }
 
 #canvas-wrapper {
   width: 100%;
   max-width: calc(1920px + 10%);
   height: 150vh;
 }
+
+#main-wrapper {
+  min-height: 150vh;
+}

scss/pages/contact.scss

@@ -10,7 +10,7 @@ main {
   row-gap: var(--spacing-xl);
   box-sizing: border-box;
 
-  padding: 25vh var(--spacing-xl) var(--spacing-xxl) var(--spacing-xl);
+  padding: 25vh 16px var(--spacing-xxl) 16px;
 
   @include media-breakpoint-up(lg) {
     padding: 170px var(--spacing-xl) var(--spacing-xxl) var(--spacing-xl);

scss/pages/main.scss

@@ -5,7 +5,7 @@
 
 main {
   box-sizing: border-box;
-  padding: 180px 32px 64px 32px;
+  padding: 50vh 16px 32px 16px;
   & > h1 {
     @include typography(main-header);
     color: var(--main-text);

scss/pages/products.scss

@@ -5,7 +5,7 @@
 
 main {
   box-sizing: border-box;
-  padding: 25vh var(--spacing-xl) var(--spacing-xxl) var(--spacing-xl);
+  padding: 50vh 16px 32px 16px;
 
   @include media-breakpoint-up(lg) {
     padding: 170px var(--spacing-xl) var(--spacing-xxl) var(--spacing-xl);

scss/pages/services.scss

@@ -3,7 +3,7 @@
 @use "../components/essentials";
 
 main {
-  padding: 25vh var(--spacing-xl) var(--spacing-xxl) var(--spacing-xl);
+  padding: 50vh 16px 32px 16px;
 
   @include media-breakpoint-up(lg) {
     padding: 170px var(--spacing-xl) var(--spacing-xxl) var(--spacing-xl);