Keep original photos ratio if not 3/2 on Viewer

- Fix previousPage usage
- Fix entering animation timings and previous photo navigation
- Add fade transition on fullscreen viewer for mobile
- Display date only if existing

src/style/pages/_viewer.scss

@@ -84,6 +84,10 @@
             transform: translate3d(var(--offset-x), var(--offset-y), 0) scale(var(--scale)) rotate(var(--rotate));
             transition: opacity 1s var(--ease-quart), transform 1s var(--ease-quart);
             will-change: transform;
+            box-shadow:
+                0 12px 12px rgba(#000, 0.15),
+                0 20px 20px rgba(#000, 0.15),
+                0 48px 48px rgba(#000, 0.15);
 
             picture {
                 position: absolute;
@@ -106,6 +110,12 @@
                 user-select: none;
                 transition: opacity 1s var(--ease-quart);
             }
+
+            &.not-landscape {
+                img {
+                    object-fit: contain;
+                }
+            }
         }
 
         // Hidden photo over
@@ -115,6 +125,7 @@
             --offset-x: 0%;
             --offset-y: -7%;
             z-index: 9;
+            pointer-events: none;
 
             .photo {
                 opacity: 0;
@@ -133,13 +144,6 @@
             --rotate: 0deg;
             --offset-y: 0%;
 
-            .photo {
-                box-shadow:
-                    0 12px 12px rgba(#000, 0.15),
-                    0 20px 20px rgba(#000, 0.15),
-                    0 48px 48px rgba(#000, 0.15);
-            }
-
             @include bp (md) {
                 --offset-x: 0%;
                 --offset-y: 0%;
@@ -234,7 +238,7 @@
 
         h1 {
             color: $color-secondary;
-            font-size: clamp(#{rem(20px)}, 6.5vw, #{rem(28px)});
+            font-size: clamp(#{rem(18px)}, 5.5vw, #{rem(28px)});
             line-height: 1.1;
 
             @include bp (md) {
@@ -246,15 +250,10 @@
         .detail {
             display: inline-block;
             align-items: center;
-            margin-top: 24px;
             color: rgba($color-tertiary, 0.7);
             line-height: 1.5;
 
-            @include bp (md) {
-                margin-top: 16px;
-            }
             @include bp (lg) {
-                margin-top: 0;
                 margin-left: auto;
                 text-align: right;
                 padding-left: 12px;
@@ -375,12 +374,15 @@
         left: 0;
         width: 100%;
         height: 100%;
+        background: $color-primary-darker;
 
         .inner {
             width: 100%;
             height: 100%;
         }
         picture {
+            display: flex;
+            justify-content: center;
             width: 100%;
             height: 100%;
             overflow: auto;
@@ -395,6 +397,7 @@
             user-select: none;
         }
 
+
         .close {
             $color-shadow: rgba(#000, 0.15);
             position: absolute;