.image-base {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition-property: opacity, transform;
  transition-duration: var(--hs-transitions-duration-base);
  transition-timing-function: var(--hs-transitions-easing);
}

.image-base--placeholder {
  position: relative;
  word-break: break-all;
}

.image-base__placeholder-text {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - var(--hs-spacing-small));
  width: calc(100% - var(--hs-spacing-small));
  padding: var(--hs-spacing-small);
  overflow: hidden;
  color: var(--hs-color-placeholder_image-fg);
  background: var(--hs-color-placeholder_image-bg);
}

.image-base__empty-image {
  width: 100%;
  height: 100%;
}

.image-base--placeholder-size-1 {
  font-size: 1rem;
}

.image-base--placeholder-size-2 {
  font-size: 1.2rem;
}

.image-base--placeholder-size-3 {
  font-size: 1.4rem;
}

.image-base--placeholder-size-4 {
  font-size: 1.6rem;
}

.image-base--placeholder-size-5 {
  font-size: 1.8rem;
}

.image-base--placeholder-size-6 {
  font-size: 2rem;
}

.image-base--placeholder-size-7 {
  font-size: 2.2rem;
}

.image-base--placeholder-size-8 {
  font-size: 2.4rem;
}

.image-base--object-fit-none {
  object-fit: none;
}

.image-base--object-fit-fill {
  object-fit: fill;
}

.image-base--object-fit-cover {
  object-fit: cover;
}

.image-base--object-fit-contain {
  object-fit: contain;
}

.image-base--object-fit-scale-down {
  object-fit: scale-down;
}