Fix responsive margins and spacing around the globe

src/routes/choose.svelte

@@ -60,7 +60,7 @@
                 <TitleSite />
             </div>
 
-            <div class="page__description page__part style-description">
+            <div class="explore__description page__description page__part style-description">
                 <p>{$site.explore_globe}</p>
             </div>
         </div>

src/style/layouts/_explore.scss

@@ -1,24 +1,28 @@
 .explore {
     // Description
     &__description {
+        position: relative;
+        z-index: 3;
         max-width: 312px;
         margin: 0 auto;
-        margin-bottom: 72px;
 
         @include breakpoint (sm) {
             max-width: 472px;
-            margin-bottom: 120px;
+            margin-bottom: 0 !important;
         }
     }
 
     // Globe
     .globe {
-        margin-top: -25vw;
+        margin-top: -96px;
-        margin-bottom: -18vw;
+        margin-bottom: -160px;
 
+        @include breakpoint (sm) {
+            margin-bottom: calc(-120px - 6vw);
+        }
         @include breakpoint (xl) {
-            margin-top: -320px;
+            margin-top: -176px;
-            margin-bottom: -320px;
+            margin-bottom: -240px;
         }
     }
 
@@ -26,7 +30,7 @@
     .browse {
         position: relative;
         z-index: 3;
-        padding-left: 0;
+        margin-top: 72px;
-        padding-right: 0;
+        margin-bottom: 72px;
     }
 }

src/style/molecules/_globe.scss

@@ -3,11 +3,18 @@
     position: relative;
     z-index: 2;
     width: 100vw;
-    height: 120vw;
+    height: 1040px;
     overflow: hidden;
     cursor: grab;
     user-select: none;
 
+    @include breakpoint (sm) {
+        height: 140vw;
+    }
+    @include breakpoint (xl) {
+        height: 2000px;
+    }
+
     // Cut
     &__cut {
         opacity: 0.5;

src/style/organisms/_locations.scss

@@ -1,7 +1,5 @@
 .browse {
     width: 100%;
-    margin-top: 72px;
-    margin-bottom: 72px;
     overflow: hidden;
 
     @include breakpoint (sm) {
@@ -50,6 +48,7 @@
             grid-template-columns: repeat(3, 1fr);
             grid-column-gap: pxVW(96);
             grid-row-gap: pxVW(120);
+            // TODO: center alone locations on a row?
             min-height: 200px;
             margin-top: 112px;
             margin-bottom: pxVW(120);

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