.block-image {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}
.block-image img,
.block-image svg {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out;
}
.block-image--hero {
  border-radius: 0; 
  --color-border-light: var(--color-text-main);
  --color-border-alt: var(--color-base-light);
  --color-bg-button: var(--color-text-main);
}
.image_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}
.image_wrap .image_wrap-img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image_wrap .image_wrap-img .image_wrap-img-circle {
  width: 100%;
}
.image_wrap .image_wrap-text {
  width: 100%;
  font-style: normal;
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: 120%;
  color: var(--color-text-main);
}
.block-image.is-loading {
  background: var(--color-bg-button);
  min-height: 200px;
}
.block-image.is-loaded img {
  opacity: 1;
}
.block-image:not(.is-loaded) img {
  opacity: 0;
}