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}
-                <p class="state style-caps style-caps--transparent">
+                    class:active={photo === currentPhoto}
-                    {currentPhoto.location.region}, {currentPhoto.location.country.name}
+                    class:next={photo === nextPhoto}
-                </p>
+                >
+                    <p class="street">{photo.name}</p>
+                    <p class="state style-caps style-caps--transparent">
+                        {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,53 +185,49 @@
     /*
     ** Information
     */
-    &__information {
+    &__infos {
         position: relative;
         z-index: 3;
 
+        // Locations
+        &--locations {
+            position: relative;
+            overflow: hidden;
+            min-height: 128px;
+        }
+
         // Location
         &--location {
+            $distance: 40%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            opacity: 0;
             text-align: center;
+            transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
+            will-change: transform, opacity;
+            margin-top: 32px;
 
-            .street {
+            @include breakpoint (sm) {
-                width: 100%;
+                margin-top: pxVW(80);
-                position: relative;
-                margin-top: 32px;
-                height: 30px;
-
-                @include breakpoint (sm) {
-                    margin-top: pxVW(80);
-                }
-                @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);
-                    }
-                }
             }
+            @include breakpoint (xl) {
+                margin-top: 72px;
+            }
+
+            &.prev {
+                transform: translateY(-$distance);
+            }
+            &.active {
+                transform: translateY(0);
+                opacity: 1;
+            }
+            &.next {
+                transform: translateY($distance);
+            }
+
+            // State
             .state {
                 margin-top: 6px;
             }