From 1cc823e9d1e68749655ef1b3f9f8529c501c4b27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 31 Mar 2020 20:03:42 +0200
Subject: [PATCH] Carousel: Card stacking effect on mobile

- As well as a grabbing cursor to indicate the click and drag interaction
---
 src/style/organisms/_carousel.scss | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss
index 20efe09..b17255a 100644
--- a/src/style/organisms/_carousel.scss
+++ b/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 {
-                    opacity: 0.4;
+                    @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);
                 }