.teardrop-image-group {
  --teardrop-image-group-gap: 8px;
  --teardrop-image-box-shadow: 0px 4px 34px 0px #00000026;
  --teardrop-background-accent: #000;

  width: 100%;
}

.teardrop-image-group--theme-avanos {
  --teardrop-background-accent: var(--thm-avanos-gradient-otp);
}

.teardrop-image-group--theme-coolief {
  --teardrop-background-accent: var(--wp--preset--color--coolief-blue);
}

.teardrop-image-group__row {
  display: flex;
  gap: var(--teardrop-image-group-gap);
}

.teardrop-image-group__row--top {
  margin-bottom: var(--teardrop-image-group-gap);
  align-items: end;
  justify-content: end;
  padding-left: 5.25%;
}

.teardrop-image-group__row--bottom {
  align-items: start;
  padding-right: 5.25%;
}

.teardrop-image-group__image {
  width: calc(64.5% - var(--teardrop-image-group-gap) / 2);
  aspect-ratio: 1/1;
  border-top-left-radius: 100%;
  border-bottom-right-radius: 100%;
  box-shadow: var(--teardrop-image-box-shadow);
}

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

.teardrop-image-group__image--right {
  border-top-right-radius: 100%;
}

.teardrop-image-group__image--left {
  border-bottom-left-radius: 100%;
}

.teardrop-image-group__accent {
  width: calc(27.6% - var(--teardrop-image-group-gap) / 2);
  aspect-ratio: 1/1;
  border-top-right-radius: 100%;
  border-bottom-left-radius: 100%;
  box-shadow: var(--teardrop-image-box-shadow);
  background: var(--teardrop-background-accent);
}

.teardrop-image-group__accent--left {
  border-top-left-radius: 100%;
}

.teardrop-image-group__accent--right {
  border-bottom-right-radius: 100%;
}

.teardrop-image-group__row picture {
  display: contents;
}

.teardrop-image-group__row source {
  display: none;
}