Fix responsive margins and spacing around the globe

src/style/pages/_homepage.scss

@@ -9,14 +9,21 @@
         margin-left: -#{pxVW(160)};
     }
 
-
     // Description
     &__description {
+        margin-top: 14vw;
         margin-bottom: 72px;
+        padding: 0 32px;
         color: $color-text;
 
+        @include breakpoint (600px) {
+            margin-top: 72px;
+        }
         @include breakpoint (sm) {
-            margin: 0 auto 120px;
+            margin-left: auto;
+            margin-right: auto;
+            margin-bottom: 120px;
+            padding: 0;
         }
 
         p {
@@ -28,11 +35,11 @@
         }
     }
 
-
     // Carousel
     .carousel {
         position: relative;
 
+        // Beige background under
         &:after {
             content: "";
             position: absolute;
@@ -68,15 +75,16 @@
 
     // Description
     .style-description {
-        position: relative;
-        z-index: 3;
         color: $color-tertiary;
     }
 
     // Globe
     .globe {
-        margin-bottom: -52vh;
+        margin-bottom: calc(-200px - 8vw);
 
+        @include breakpoint (sm) {
+            margin-bottom: calc(-100px - 28vw);
+        }
         @include breakpoint (xl) {
             margin-bottom: -550px;
         }
@@ -84,7 +92,11 @@
 
     // Browse
     .browse {
-        margin-top: 0;
+        margin-top: 4vw;
+
+        @include breakpoint (xl) {
+            margin-top: 72px;
+        }
     }
 
     // Of text