Stacked Swipe Deck

<div class="nuda-gc2-swipe-deck" role="group" aria-roledescription="carousel" aria-label="Swipeable card deck">
  <div class="nuda-gc2-swipe-deck__card nuda-gc2-swipe-deck__card--back2" style="background:linear-gradient(135deg,#22d3ee,#6ee7b7)"></div>
  <div class="nuda-gc2-swipe-deck__card nuda-gc2-swipe-deck__card--back1" style="background:linear-gradient(135deg,#ffb45e,#ff5e7a)"></div>
  <div class="nuda-gc2-swipe-deck__card nuda-gc2-swipe-deck__card--top" role="group" aria-roledescription="slide" aria-label="1 of 3" style="background:linear-gradient(135deg,#9d6dff,#ff6dd4)">
    <span>Swipe</span>
  </div>
</div>

.nuda-gc2-swipe-deck {
  position: relative;
  width: 100%;
  max-width: 200px;
  height: 150px;
}

.nuda-gc2-swipe-deck__card {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.7);
  transition: transform .45s cubic-bezier(.16,1,.3,1),opacity .45s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  color: #fafafa;
  font-size: 12px;
  font-weight: 600;
}

.nuda-gc2-swipe-deck__card--back2 {
  transform: translateY(12px) scale(.9);
  opacity: .55;
}

.nuda-gc2-swipe-deck__card--back1 {
  transform: translateY(6px) scale(.95);
  opacity: .8;
}

.nuda-gc2-swipe-deck__card--top {
  transform: translateY(0) rotate(0deg) scale(1);
  cursor: grab;
}

.nuda-gc2-swipe-deck:hover .nuda-gc2-swipe-deck__card--top {
  transform: translate(24px,-6px) rotate(8deg);
}

.nuda-gc2-swipe-deck:hover .nuda-gc2-swipe-deck__card--back1 {
  transform: translateY(0) scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-gc2-swipe-deck__card {
    transition: none;
  }
  .nuda-gc2-swipe-deck:hover .nuda-gc2-swipe-deck__card--top {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}