Carousel: Card stacking effect on mobile

- As well as a grabbing cursor to indicate the click and drag interaction

src/style/organisms/_carousel.scss

@@ -22,6 +22,11 @@
         position: relative;
         z-index: 2;
         margin: 0 auto;
+        cursor: grab;
+
+        &:active {
+            cursor: grabbing;
+        }
 
         @include breakpoint (xl) {
             max-width: 100%;
@@ -46,7 +51,6 @@
         // Photo
         &__photo {
             $duration: 1s;
-
             opacity: 0;
             overflow: hidden;
             position: absolute;
@@ -107,15 +111,19 @@
                 }
 
                 &:before {
+                    @include breakpoint (sm) {
                         opacity: 0.4;
                     }
                 }
+            }
 
             // Previous photo
             &--prev {
-                z-index: 8;
+                z-index: 9;
+                transform: translate(-40%, 0) scale(0.85);
 
                 @include breakpoint (sm) {
+                    z-index: 8;
                     transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
                 }
 
@@ -127,9 +135,11 @@
 
             // Next photo
             &--next {
-                z-index: 9;
+                z-index: 8;
+                transform: translate(40%, 0) scale(0.85);
 
                 @include breakpoint (sm) {
+                    z-index: 9;
                     transform: translate($distance, -1%) rotate($angle) scale($scale);
                 }