.ws-image-depth--none {
  transform: none;
}

.ws-image-depth--floating {
  transform: translateY(-8px);
}

.ws-image-depth--parallax {
  transform: scale(1.04);
}

.ws-image-depth--layered::before {
  z-index: -1;
  inset: 8%;
  background: color-mix(in srgb, currentColor 12%, transparent);
  transform: translate(18px, 18px);
}

.ws-image-depth--perspective {
  transform: perspective(900px) rotateY(-8deg) rotateX(3deg);
  transform-style: preserve-3d;
}

.ws-image-depth--tilt {
  transform: rotate(-2deg);
}

.ws-image-depth--card-3d {
  transform: perspective(1000px) rotateX(4deg) rotateY(-6deg);
  transform-style: preserve-3d;
}

.ws-image-depth--floating,
.ws-image-depth--parallax,
.ws-image-depth--perspective,
.ws-image-depth--tilt,
.ws-image-depth--card-3d {
  transition:
    transform var(--ws-image-duration) var(--ws-image-easing),
    filter var(--ws-image-duration) var(--ws-image-easing);
}

.ws-image-depth--floating:hover {
  transform: translateY(-14px);
}

.ws-image-depth--parallax:hover {
  transform: scale(1.08);
}

.ws-image-depth--perspective:hover {
  transform: perspective(900px) rotateY(0deg) rotateX(0deg);
}

.ws-image-depth--tilt:hover {
  transform: rotate(0deg);
}

.ws-image-depth--card-3d:hover {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
}