Carousel: Use the counter as a component

- Add animation when changing photos
- Reusable and scalable to more than XX photos

src/style/atoms/_counter.scss

@@ -0,0 +1,22 @@
+// Counter
+.counter {
+    display: inline-flex;
+    justify-content: center;
+    font-family: $font-serif-extra;
+    font-size: pxVW(672);
+    color: rgba($color-tertiary, 0.4);
+    text-align: center;
+    // pointer-events: none;
+    // user-select: none;
+
+    // Column
+    &__column {
+        display: flex;
+        flex-direction: column;
+        line-height: 0.85;
+        text-align: right;
+        margin: 0 -16px;
+        transition: transform 0.6s $ease-quart;
+        will-change: transform;
+    }
+}

src/style/organisms/_carousel.scss

@@ -6,7 +6,10 @@
         max-width: 1280px;
         padding: 0;
 
-        @include breakpoint (1600px) {
+        @include breakpoint (sm) {
+            max-width: 85%;
+        }
+        @include breakpoint (1680px) {
             max-width: 1424px;
         }
     }
@@ -20,9 +23,6 @@
         z-index: 2;
         margin: 0 auto;
 
-        @include breakpoint (sm) {
-            max-width: 85%;
-        }
         @include breakpoint (xl) {
             max-width: 100%;
         }
@@ -194,7 +194,11 @@
     &__locations {
         position: relative;
         overflow: hidden;
-        min-height: 128px;
+        min-height: 56px;
+
+        @include breakpoint (sm) {
+            min-height: 128px;
+        }
     }
 
     // Location

src/style/style.scss

@@ -21,6 +21,7 @@
 @import "atoms/toggle";
 @import "atoms/link";
 @import "atoms/switcher";
+@import "atoms/counter";
 
 // Molecules
 @import "molecules/location";