Two way scroll binding

src/components/Controls.module.css

@@ -1,10 +1,10 @@
 .Controls {
   position: fixed;
   background: var(--clr-bg-secondary);
-  left: 16px;
+  left: var(--gap-sm);
   top: 50%;
   transform: translateY(-50%);
-  padding: 18px;
+  padding: var(--gap-sm);
   border-radius: 12px;
   width: 64px;
 }
@@ -13,7 +13,7 @@
   position: relative;
   height: calc(64px * 3);
   width: 100%;
-  margin-bottom: 32px;
+  margin-bottom: var(--gap-md);
 }
 
 .controlsWrapper, .gooWrapper {
@@ -41,7 +41,7 @@
   align-items: center;
   width: 100%;
   height: auto;
-  padding: 18px;
+  padding: var(--gap-sm);
   box-sizing: border-box;
 }