@media (max-width: 768px) {
  .ws-image-mask--stripes,
  .ws-image-mask--vertical-slices,
  .ws-image-mask--zigzag,
  .ws-image-mask--mosaic,
  .ws-image-mask--layered,
  .ws-image-mask--stacked {
    clip-path: inset(0 round var(--ws-image-radius, 18px));
  }

  .ws-image-mask--stepped,
  .ws-image-mask--staggered {
    clip-path: polygon(
      0 0,
      84% 0,
      84% 12%,
      92% 12%,
      92% 24%,
      100% 24%,
      100% 100%,
      0 100%
    );
  }

  .ws-image-depth--perspective,
  .ws-image-depth--card-3d,
  .ws-image-depth--tilt {
    transform: none;
  }

  .ws-image-shadow--brutal {
    filter: drop-shadow(6px 6px 0 currentColor);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-image-effect,
  .ws-image-effect *,
  .ws-image-effect::before,
  .ws-image-effect::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
  [class*="ws-image-mask--"] {
    clip-path: none !important;
    border-radius: var(--ws-image-radius, 18px);
  }
}

@supports not (color: color-mix(in srgb, CanvasText 10%, transparent)) {
  .ws-image-shadow--soft,
  .ws-image-shadow--floating,
  .ws-image-shadow--cinematic {
    filter: drop-shadow(0 24px 60px rgba(0,0,0,0.18));
  }
/*
  .ws-image-overlay--dark::after {
    background: rgba(0,0,0,0.48);
  }

  .ws-image-overlay--light::after {
    background: rgba(255,255,255,0.65);
  }*/
}