Carousel: Rewrite some classes

src/organisms/Carousel.svelte

@@ -159,17 +159,23 @@
             {/if}
         </div>
 
-        <div class="carousel__information">
+        <div class="carousel__infos">
-            <div class="carousel__information--location style-location">
+            <div class="carousel__infos--locations">
-                <p class="street">
+                {#each photos as photo, index}
-                    {currentPhoto.name}
+                <div class="carousel__infos--location style-location"
-                </p>
+                    class:prev={photo === prevPhoto}
+                    class:active={photo === currentPhoto}
+                    class:next={photo === nextPhoto}
+                >
+                    <p class="street">{photo.name}</p>
                     <p class="state style-caps style-caps--transparent">
-                    {currentPhoto.location.region}, {currentPhoto.location.country.name}
+                        {photo.location.name}, {photo.location.country.name}
                     </p>
                 </div>
+                {/each}
+            </div>
             {#if viewer}
-            <p class="carousel__information--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
+            <p class="carousel__infos--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
             {/if}
         </div>
 

src/style/organisms/_carousel.scss

@@ -185,19 +185,29 @@
     /*
     ** Information
     */
-    &__information {
+    &__infos {
         position: relative;
         z-index: 3;
 
+        // Locations
+        &--locations {
+            position: relative;
+            overflow: hidden;
+            min-height: 128px;
+        }
+
         // Location
         &--location {
-            text-align: center;
+            $distance: 40%;
-
+            position: absolute;
-            .street {
+            top: 0;
+            left: 0;
             width: 100%;
-                position: relative;
+            opacity: 0;
+            text-align: center;
+            transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
+            will-change: transform, opacity;
             margin-top: 32px;
-                height: 30px;
 
             @include breakpoint (sm) {
                 margin-top: pxVW(80);
@@ -206,20 +216,6 @@
                 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);
             }
@@ -230,8 +226,8 @@
             &.next {
                 transform: translateY($distance);
             }
-                }
+
-            }
+            // State
             .state {
                 margin-top: 6px;
             }