/* Card container */
.card-stack {
  position: relative;
  width: 220px;
  height: 280px;
}

/* Common card style */
.card {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
  transition: 0.4s ease;
}

/* Back cards */
.card.one {
  background: linear-gradient(135deg, #7f6cff, #b39cff);
  transform: rotate(-8deg);
}
.card.two {
  background: linear-gradient(135deg, #ff6f91, #ff9671);
  transform: rotate(8deg);
}

/* Front card */
.card.main {
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 18px;
  z-index: 5;
}

/* Hover effect */
.card-stack:hover .one {
  transform: translateX(-35px) rotate(-15deg);
}
.card-stack:hover .two {
  transform: translateX(35px) rotate(15deg);
}
.card-stack:hover .main {
  transform: translateY(-10px);
}