Viewer: Fix responsive and positioning

src/style/pages/_viewer.scss

@@ -3,14 +3,12 @@
     position: relative;
     height: 100vh;
     min-height: 560px;
-    padding-top: 16px;
-    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 
     @include breakpoint (sm) {
         width: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
         padding-top: 24px;
     }
 
@@ -19,7 +17,9 @@
     ** Top part
     */
     &__top {
+        position: relative;
         z-index: 10;
+        margin-top: 16px;
         padding-left: 24px;
         padding-right: 16px;
         display: flex;
@@ -65,27 +65,37 @@
     ** Carousel
     */
     .carousel {
+        width: 100%;
+
         @include breakpoint (xs) {
-            position: absolute;
-            top: 50%;
-            left: 0;
-            right: 0;
-            transform: translateY(-37%);
+            margin-top: 20%;
         }
         @include breakpoint (sm) {
-            width: 100%;
             margin: auto;
         }
         // Landscape
-        @media screen and (max-width: $screen-lg) and (orientation: landscape) {
+        @media screen and (min-width: $screen-sm) and (max-width: $screen-lg) and (orientation: landscape) {
             width: 95%;
         }
 
+        // Wrap
+        .wrap {
+            @include breakpoint (xs) {
+                width: 100%;
+            }
+        }
+
         // Gallery
         .gallery {
             left: 0;
             right: 0;
 
+            &__images {
+                @include breakpoint (xs) {
+                    overflow: hidden;
+                }
+            }
+
             // Specific box shadow for images
             &__photo {
                 box-shadow: 0 pxVW(16px) pxVW(40) rgba(#2E025C, 0.4);
@@ -95,6 +105,7 @@
         // Informations
         &__infos {
             margin-top: 32px;
+            margin-bottom: 16px;
             padding: 0 24px;
 
             @include breakpoint (sm) {
@@ -120,13 +131,11 @@
 
         // Date
         &__date {
-            margin-top: 16px;
             font-size: rem(12px);
             color: rgba($color-tertiary, 0.5);
             text-align: center;
 
             @include breakpoint (sm) {
-                margin: 0;
                 font-size: rem(14px);
                 text-align: left;
             }
@@ -161,11 +170,10 @@
 
         // Dots
         &__dots {
-            position: absolute;
-            bottom: 24px;
-            left: 0;
-            right: 0;
+            position: relative;
             z-index: 20;
+            margin-top: 24px;
+            margin-bottom: 24px;
         }
     }
 }