Use a component for carousel dots

- Show 5 dots by default
- First and last one from current index are smaller
- Other ones are hidden

src/style/organisms/_carousel.scss

@@ -252,16 +252,37 @@
             margin-top: 32px;
 
             li {
-                display: block;
+                display: flex;
+                align-items: center;
                 padding: 4px;
                 cursor: pointer;
 
+                &, button {
+                    transition: all 0.6s $ease-quart;
+                    will-change: transform, width, height, padding;
+                }
+
+                // Active
                 &.active button {
                     background-color: $color-secondary;
                     transform: scale(1.25);
-                    will-change: scale, background-color;
                 }
 
+                // Small dot
+                &.small button {
+                    transform: scale(0.6);
+                    opacity: 0.5;
+                }
+                // Hidden
+                &.hidden {
+                    padding: 0;
+                    transform: scale(0);
+                    opacity: 0;
+                    width: 0;
+                    height: 0;
+                }
+
+                // Hover
                 &:hover:not(.active) {
                     button {
                         background-color: lighten($color-lightpurple, 10);
@@ -277,7 +298,6 @@
                 background-color: $color-lightpurple;
                 border-radius: 100%;
                 text-decoration: none;
-                transition: all 600ms $ease-quart;
             }
         }
     }