Fix responsive stuff

- Globe is now using vws with min and max height
- Photos list and Carousel

src/style/molecules/_globe.scss

@@ -3,19 +3,21 @@
     position: relative;
     z-index: 2;
     width: 100vw;
-    height: 800px;
+    height: 180vw;
+    min-height: 700px;
+    max-height: 1536px;
     overflow: hidden;
     cursor: grab;
     user-select: none;
 
     @include breakpoint (sm) {
-        height: 1280px;
+        height: 130vw;
     }
     @include breakpoint (md) {
-        height: 1340px;
+        height: 112vw;
     }
     @include breakpoint (xl) {
-        height: 1670px;
+        height: 100vw;
     }
 
     // DEBUG //

src/style/molecules/_photo.scss

@@ -59,7 +59,10 @@
             margin: 0;
             padding: 0;
 
-            @media (min-aspect-ratio: 16/9) {
+            @media (min-aspect-ratio: 16/8) {
+                max-width: 944px;
+            }
+            @media (min-aspect-ratio: 16/10) {
                 max-width: 1000px;
             }
         }

src/style/organisms/_carousel.scss

@@ -12,13 +12,13 @@
         padding: 0;
 
         @include breakpoint (sm) {
-            max-width: 85%;
+            max-width: 80%;
         }
         @include breakpoint (1680px) {
             max-width: 1424px;
         }
-        @media (min-aspect-ratio: 16/9) {
+        @media (min-aspect-ratio: 16/10) {
-            max-width: 1200px;
+            max-width: 68%;
         }
     }
 

src/style/pages/_homepage.scss

@@ -60,6 +60,9 @@
             @include breakpoint (xxl) {
                 height: 820px;
             }
+            @media (min-aspect-ratio: 16/10) {
+                height: 36vw;
+            }
         }
 
         // Photos

src/style/pages/_viewer.scss

@@ -29,6 +29,9 @@
 
         @include breakpoint (sm) {
             justify-content: center;
+            margin-bottom: 24px;
+        }
+        @include breakpoint (lg) {
             margin-top: 24px;
             margin-bottom: 48px;
         }