Carousel: Add a transition on title when changing photo

src/style/organisms/_carousel.scss

@@ -44,6 +44,8 @@
 
             // Photo
             &--photo {
+                $duration: 0.9s;
+
                 opacity: 0;
                 overflow: hidden;
                 position: absolute;
@@ -54,7 +56,7 @@
                 height: 100%;
                 transform: scale($scale);
                 box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
-                transition: transform 600ms $ease-quart, opacity 600ms $ease-quart;
+                transition: transform $duration $ease-quart, opacity $duration $ease-quart;
                 will-change: transform, opacity;
 
                 @include breakpoint (sm) {
@@ -179,16 +181,23 @@
         }
     }
 
-    // Information
+
+    /*
+    ** Information
+    */
     &__information {
         position: relative;
         z-index: 3;
 
         // Location
         &--location {
+            text-align: center;
+
             .street {
-                margin-top: 24px;
-                color: #fff;
+                width: 100%;
+                position: relative;
+                margin-top: 32px;
+                height: 30px;
 
                 @include breakpoint (sm) {
                     margin-top: pxVW(80);
@@ -196,16 +205,43 @@
                 @include breakpoint (xl) {
                     margin-top: 72px;
                 }
+
+                span {
+                    $distance: 40%;
+
+                    position: absolute;
+                    display: block;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    white-space: nowrap;
+                    transform: translateY(-$distance);
+                    opacity: 0;
+                    transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
+                    will-change: transform, opacity;
+
+                    &.prev {
+                        transform: translateY(-$distance);
+                    }
+                    &.active {
+                        transform: translateY(0);
+                        opacity: 1;
+                    }
+                    &.next {
+                        transform: translateY($distance);
+                    }
+                }
             }
             .state {
-                margin-top: 4px;
-                color: rgba($color-tertiary, 0.5);
+                margin-top: 6px;
             }
         }
     }
 
 
-    // Dots for slider (mobile)
+    /*
+    ** Dots for slider (mobile)
+    */
     &__dots {
         display: none;
 

src/style/pages/_viewer.scss

@@ -96,7 +96,7 @@
 
         // Information
         &__information {
-            margin-top: 24px;
+            margin-top: 32px;
             padding: 0 24px;
 
             @include breakpoint (sm) {
@@ -107,6 +107,7 @@
 
             // Location
             &--location {
+                width: 75%;
                 text-align: left;
 
                 .street {