<div class="scd-hov">
  <div class="scd-hov__stage">
    <div class="scd-hov__card scd-hov__card--c1"><div><span class="scd-hov__tag">SUNRISE</span><h3>Citrus</h3></div><span class="scd-hov__price">$18</span></div>
    <div class="scd-hov__card scd-hov__card--c2"><div><span class="scd-hov__tag">MEADOW</span><h3>Verdant</h3></div><span class="scd-hov__price">$22</span></div>
    <div class="scd-hov__card scd-hov__card--c3"><div><span class="scd-hov__tag">TWILIGHT</span><h3>Indigo</h3></div><span class="scd-hov__price">$26</span></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&display=swap');

.scd-hov, .scd-hov *, .scd-hov *::before, .scd-hov *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-hov {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(120deg,#ffe3ec,#e4e9ff);
  font-family: 'DM Sans', sans-serif;
}
.scd-hov__stage { position: relative; width: 200px; height: 280px; }
.scd-hov__card {
  position: absolute; inset: 0;
  border-radius: 24px;
  padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 14px 34px rgba(80,60,120,.2);
  transition: transform .55s cubic-bezier(.34,1.3,.4,1), box-shadow .4s;
  cursor: pointer;
  color: #3a2f4a;
}
.scd-hov__card h3 { font-family: 'Syne', sans-serif; font-size: 1.5rem; }
.scd-hov__price { font-family: 'Syne', sans-serif; font-size: 1.8rem; font-weight: 800; }
.scd-hov__tag { font-size: .85rem; opacity: .7; }
.scd-hov__card--c1 { background: linear-gradient(160deg,#fff0a8,#ffd56b); z-index: 3; }
.scd-hov__card--c2 { background: linear-gradient(160deg,#c2f0d8,#86d9b0); z-index: 2; }
.scd-hov__card--c3 { background: linear-gradient(160deg,#cfd6ff,#9aa8ff); z-index: 1; color: #2a2a4a; }
.scd-hov__stage:hover .scd-hov__card--c1 { transform: translateX(-130px) rotate(-8deg); }
.scd-hov__stage:hover .scd-hov__card--c3 { transform: translateX(130px) rotate(8deg); }
.scd-hov__stage:hover .scd-hov__card--c2 { transform: translateY(-16px) scale(1.05); }
.scd-hov__card:hover { box-shadow: 0 26px 50px rgba(80,60,120,.32); }

@media (prefers-reduced-motion: reduce) {
  .scd-hov__card { transition: none !important; }
}