Carousel: Working dots

src/style/organisms/_carousel.scss

@@ -248,23 +248,26 @@
         @include breakpoint (xs) {
             display: flex;
             justify-content: center;
-            margin-top: 40px;
+            margin-top: 32px;
 
             li {
                 display: block;
-                padding: 0 4px;
+                padding: 4px;
                 cursor: pointer;
 
                 &.active button {
                     background-color: $color-secondary;
+                    transform: scale(1.25);
+                    will-change: scale, background-color;
                 }
 
-                &:hover {
+                &:hover:not(.active) {
                     button {
                         background-color: lighten($color-lightpurple, 10);
                     }
                 }
             }
+
             button {
                 display: block;
                 width: 8px;
@@ -273,6 +276,7 @@
                 background-color: $color-lightpurple;
                 border-radius: 50vh;
                 text-decoration: none;
+                transition: all 600ms $ease-quart;
             }
         }
     }