.teardrop-image {
  --teardrop-image-box-shadow: 0px 4px 34px 0px #00000026;
  --teardrop-border-accent: transparent;
  --teardrop-image--border: 5px;

  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 100% 100% 100% 0;
  box-shadow: var(--teardrop-image-box-shadow);
  background: var(--teardrop-border-accent);
  overflow: hidden;
}

.teardrop-image--theme-none {
  --teardrop-image--border: 0px;
}
.teardrop-image--theme-white {
  --teardrop-border-accent: var(--wp--preset--color--white);
}
.teardrop-image--theme-avanos {
  --teardrop-border-accent: linear-gradient(to right, #FF9E16 0%, #FB637E 100%);
}
.teardrop-image--theme-coolief {
  --teardrop-border-accent: var(--wp--preset--color--coolief-green);
}

.teardrop-image__image {
  position: absolute;
  top: var(--teardrop-image--border);
  left: var(--teardrop-image--border);
  display: block;
  width: calc(100% - (2 * var(--teardrop-image--border))) !important;
  height: calc(100% - (2 * var(--teardrop-image--border))) !important;
  border-radius: 100% 100% 100% 0;
}

.teardrop-image__image--cover {
  object-fit: cover;
}
.teardrop-image__image--contain {
  object-fit: contain;
}
.teardrop-image__image--none {
  object-fit: none;
}
.teardrop-image__image--scale-down {
  object-fit: scale-down;
}
.teardrop-image__image--original {
  object-fit: original;
}

.teardrop-image picture {
  display: contents;
}
.teardrop-image source {
  display: none;
}