/* Shared organic image frames and crop controls. */
[data-image-frame],
.crop-preview {
  --image-x: 50%;
  --image-y: 50%;
  --image-zoom: 1;
  --image-fit: cover;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-2, #e6dccd);
}

[data-image-frame] > img[data-edit-image],
.crop-preview > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: var(--image-fit);
  object-position: var(--image-x) var(--image-y);
  transform: scale(var(--image-zoom));
  transform-origin: var(--image-x) var(--image-y);
  will-change: transform;
}

[data-shape="petal-a"],
.crop-preview[data-shape="petal-a"] {
  border-radius: 44% 56% 47% 53% / 24% 35% 65% 76%;
}
[data-shape="petal-b"],
.crop-preview[data-shape="petal-b"] {
  border-radius: 58% 42% 62% 38% / 33% 48% 52% 67%;
}
[data-shape="petal-c"],
.crop-preview[data-shape="petal-c"] {
  border-radius: 38% 62% 43% 57% / 54% 28% 72% 46%;
}
[data-shape="leaf-left"],
.crop-preview[data-shape="leaf-left"] {
  border-radius: 76% 24% 68% 32% / 30% 38% 62% 70%;
}
[data-shape="leaf-right"],
.crop-preview[data-shape="leaf-right"] {
  border-radius: 24% 76% 32% 68% / 38% 30% 70% 62%;
}
[data-shape="leaf-wide-a"],
.crop-preview[data-shape="leaf-wide-a"] {
  border-radius: 20% 80% 24% 76% / 34% 44% 56% 66%;
}
[data-shape="leaf-wide-b"],
.crop-preview[data-shape="leaf-wide-b"] {
  border-radius: 80% 20% 72% 28% / 44% 34% 66% 56%;
}
[data-shape="drop"],
.crop-preview[data-shape="drop"] {
  border-radius: 52% 48% 58% 42% / 30% 34% 66% 70%;
}
[data-shape="arch"],
.crop-preview[data-shape="arch"] {
  border-radius: 48% 52% 20% 20% / 32% 32% 68% 68%;
}
[data-shape="soft-corner-a"],
.crop-preview[data-shape="soft-corner-a"] {
  border-radius: 30px 112px 30px 30px;
}
[data-shape="soft-corner-b"],
.crop-preview[data-shape="soft-corner-b"] {
  border-radius: 112px 30px 30px 30px;
}
[data-shape="soft-corner-c"],
.crop-preview[data-shape="soft-corner-c"] {
  border-radius: 30px 30px 112px 30px;
}
[data-shape="rounded"],
.crop-preview[data-shape="rounded"] {
  border-radius: 30px;
}
[data-shape="none"],
.crop-preview[data-shape="none"] {
  border-radius: 0;
}

@media (max-width: 820px) {
  [data-shape="soft-corner-a"],
  .crop-preview[data-shape="soft-corner-a"],
  [data-shape="soft-corner-b"],
  .crop-preview[data-shape="soft-corner-b"],
  [data-shape="soft-corner-c"],
  .crop-preview[data-shape="soft-corner-c"] {
    border-radius: 24px 68px 24px 24px;
  }
}