Adjustments to card stack animation

css/carousel.css

@@ -2,6 +2,7 @@
   position: relative;
   display: flex;
   padding-right: 30px;
+  cursor: pointer;
 }
 
 #features .row:nth-child(odd) .stack {
@@ -10,13 +11,12 @@
 
 .screenshot {
   position: relative;
-  /* transition: bottom 400ms; */
+  transition: bottom 250ms;
 }
 
 .screenshot:nth-child(3) {
   z-index: 4;
   left: -200%;
-  cursor: pointer;
 }
 
 .screenshot:nth-child(2) {
@@ -53,6 +53,15 @@
   }
 } */
 
+@keyframes shift {
+  50% {
+    transform: translate(-5px, 5px);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+
 @keyframes fade-out {
   0% {
     /* z-index: 3; */
@@ -62,19 +71,23 @@
   100% {
     /* z-index: 0; */
     opacity: 0;
+    left: calc(-200% - 10px);
     bottom: -30px;
+    scale: 1.05;
   }
 }
 
 @keyframes fade-in {
   0% {
-    /* z-index: 3; */
-    bottom: 0;
-    opacity: 10px;
+    bottom: 30px;
+    left: 30px;
+    opacity: 0;
+    scale: 0.95;
   }
   100% {
-    /* z-index: 0; */
     opacity: 1;
+    left: 20px;
     bottom: 20px;
+    scale: 1.0;
   }
 }

index.html

@@ -234,14 +234,12 @@
         <div class="container-fluid mb-4" id="features">
             <div class="row align-items-center mt-3 mb-3">
                 <div class="col-12 col-lg-8 stack">
-                    <!-- <div class="stack"> -->
                     <img src="assets/screens/screen01.png" class="img-fluid screenshot"
                         alt="The RetroDECK and ES-DE logos on a black screen" />
                     <img src="assets/screens/screen02.png" class="img-fluid screenshot"
                         alt="The RetroDECK and ES-DE logos on a black screen" />
                     <img src="assets/screens/screen03.png" class="img-fluid screenshot"
                         alt="The RetroDECK and ES-DE logos on a black screen" />
-                    <!-- </div> -->
                 </div>
                 <div class="col-12 col-lg-4">
                     <div class="feature-card p-2 mt-2 mt-lg-0">