Implement Fullscreen for mobile on photo Viewer

src/style/atoms/_button-circle.scss

@@ -4,12 +4,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 56px;
-    height: 56px;
+    width: 44px;
+    height: 44px;
     background: #fff;
     border-radius: 100vh;
     transition: background-color 0.8s var(--ease-quart);
 
+    @include bp (md) {
+        width: 56px;
+        height: 56px;
+    }
+
     & > * {
         width: 22px;
         height: 22px;
@@ -88,28 +93,33 @@
 
     // Pink color
     &--pink {
-        background-color: $color-secondary;
+        background: $color-secondary;
 
         &:hover {
-            background-color: darken($color-secondary, 7);
+            background: darken($color-secondary, 7);
         }
     }
 
     // Purple color
     &--purple {
-        background-color: $color-primary-tertiary20;
+        background: $color-primary-tertiary20;
 
         &:hover {
-            background-color: $color-lightpurple;
+            background: $color-lightpurple;
         }
     }
 
     // Gray color
     &--gray {
-        background-color: #F2F2F2;
+        background: #F2F2F2;
 
         &:hover {
-            background-color: #D2D2D2;
+            background: #D2D2D2;
         }
     }
+
+    // Gray color
+    &--gray-medium {
+        background: $color-gray;
+    }
 }

src/style/pages/_viewer-photo.scss

@@ -1,10 +1,12 @@
 .viewer-photo {
+    position: relative;
     height: 100vh;
     display: flex;
     align-items: center;
     overflow: hidden;
 
     .container {
+        position: relative;
         height: 100%;
 
         @include bp (md, max) {
@@ -14,21 +16,25 @@
 
     // Carousel
     &__carousel {
-        display: grid;
-        grid-column: span var(--columns);
-        grid-row-gap: 20px;
-        max-width: 720px;
-        margin: auto 0;
-        height: 100%;
-        position: relative;
+        position: absolute;
+        top: 0;
         left: 50%;
-        transform: translateX(-50%);
+        transform: translate3d(-50%, 0, 0);
+        grid-column: span var(--columns);
+        display: grid;
+        grid-row-gap: 20px;
+        width: calc(100% - 40px);
+        height: 100%;
+        max-width: 720px;
+        position: relative;
 
         @include bp (md) {
+            position: relative;
             max-width: none;
             margin: auto 0;
             grid-column: 3 / span 16;
             grid-row-gap: 40px;
+            transform: translate3d(-50%, 2.5%, 0);
         }
     }
 
@@ -181,12 +187,14 @@
 
     // Infos
     &__info {
+        bottom: 0;
         margin-top: auto;
         margin-bottom: 40px;
         padding: 0 20px;
         text-align: center;
 
         @include bp (md) {
+            position: static;
             margin-top: 0;
             padding: 0;
             text-align: left;
@@ -212,7 +220,7 @@
             display: inline-block;
             align-items: center;
             margin-top: 24px;
-            color: $color-tertiary;
+            color: rgba($color-tertiary, 0.7);
             line-height: 1.5;
 
             @include bp (md) {
@@ -226,12 +234,12 @@
             }
 
             a {
-                color: $color-tertiary;
+                color: inherit;
                 text-decoration: none;
                 transition: color 0.3s;
 
                 &:hover {
-                    color: $color-secondary-light;
+                    color: $color-tertiary;
                 }
             }
 
@@ -257,7 +265,7 @@
         position: absolute;
         z-index: 1;
         left: 50%;
-        bottom: calc(92% + 1vw);
+        bottom: calc(91% + 1vw);
         display: block;
         line-height: 1;
         color: rgba($color-tertiary, 0.4);
@@ -271,12 +279,16 @@
         }
         @include bp (md) {
             top: 50%;
-            left: min(68vw, 1296px);
+            left: auto;
+            right: calc(-1 * min(30vw, 400px));
             width: 350px;
             text-align: center;
             bottom: auto;
             transform: translate3d(0, -50%, 0);
         }
+        @include bp (lg) {
+            right: calc(-1 * min(25vw, 460px));
+        }
     }
 
     // Controls
@@ -326,4 +338,59 @@
             }
         }
     }
+
+    // Fullscreen viewer
+    &__fullscreen {
+        position: absolute;
+        z-index: 101;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        .inner {
+            width: 100%;
+            height: 100%;
+        }
+        picture {
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            cursor: pointer;
+        }
+        img {
+            display: block;
+            width: auto;
+            height: 100%;
+            object-fit: contain;
+            pointer-events: none;
+            user-select: none;
+        }
+
+        .close {
+            $color-shadow: rgba(#000, 0.15);
+            position: absolute;
+            z-index: 2;
+            bottom: 24px;
+            left: 50%;
+            transform: translateX(-50%);
+            box-shadow:
+                0 6px 6px $color-shadow,
+                0 12px 12px $color-shadow,
+                0 24px 24px $color-shadow;
+        }
+    }
+
+    // Notice
+    &__notice {
+        position: absolute;
+        top: 16px;
+        left: 20px;
+        line-height: 44px;
+        color: rgba($color-tertiary, 0.5);
+
+        @include bp (md) {
+            display: none;
+        }
+    }
 }