.wrap {
  padding-bottom: $gap * 2;

  &:global(.is_animated) {
    .image_container {
      transition: height 0.5s;
    }

    .image_wrap {
      transition: opacity 0.5s;
    }
  }
}

.image_container {
  width: 100%;
  border-radius: $panel_radius 0 0 $panel_radius;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  user-select: none;

  .image {
    max-height: calc(100vh - 140px);
    max-width: 100%;
    opacity: 1;
    border-radius: $radius;

    @include outer_shadow();
  }
}

.image_wrap {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  &:global(.is_active) {
    opacity: 1;
  }
}

.placeholder {
  background: red;
  height: 320px;
}