div.px-image {
  font-size: 0;
}
.px-image {
  display: inline-block;
  position: relative;
  transition: 0.25s all;
}
.px-image-previewable {
  cursor: pointer;
}
.px-image-preview {
  transition: 0.25s;
  width: 100%;
  height: 100%;
}
.px-image-preview-enter-to,
.px-image-preview-leave-from {
  opacity: 1;
}
.px-image-preview-enter-from,
.px-image-preview-leave-to {
  opacity: 0;
}
.px-image-preview-close {
  width: 20px;
  height: 20px;
  position: absolute;
  cursor: pointer;
  top: 16px;
  right: 16px;
  fill: var(--px-neutral-10);
  transition: fill 0.25s;
}
.px-image-preview-close:hover {
  fill: var(--px-neutral-8);
}
.px-image-preview-close:active {
  fill: var(--px-neutral-9);
}
.px-image-fallback {
  font-size: var(--px-medium-font-size);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.px-image .px-image-img {
  width: 100%;
  height: 100%;
}
.px-image__fill .px-image-img {
  object-fit: fill;
}
.px-image__contain .px-image-img {
  object-fit: contain;
}
.px-image__cover .px-image-img {
  object-fit: cover;
}
.px-image__none .px-image-img {
  object-fit: none;
}
.px-image__scale-down .px-image-img {
  object-fit: scale-down;
}