.ws-image-effect {
  --ws-image-radius: inherit;
  --ws-image-duration: 520ms;
  --ws-image-easing: cubic-bezier(0.22, 1, 0.36, 1);

  --ws-image-shadow-x: 0px;
  --ws-image-shadow-y: 24px;
  --ws-image-shadow-blur: 60px;
  --ws-image-shadow-color: color-mix(in srgb, CanvasText 18%, transparent);

  position: relative;
  overflow: hidden;
  border-radius: var(--ws-image-radius);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.ws-image-effect img,
.ws-image-effect picture,
.ws-image-effect video {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.ws-image-effect::before,
.ws-image-effect::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ws-image-effect::before {
  z-index: 1;
}

.ws-image-effect::after {
  z-index: 2;
}