.bp-image {
  position: relative;

  &-img {
    vertical-align: middle;
    aspect-ratio: 1 / 1;
    max-width: 100%;
  }

  &-loading,
  &-error {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: @gary-7;
    background-color: @primary-0;
    font-size: 13px;
    .no-select;

    .bp-icon-image-2-fill {
      fill: @gary-7;
    }
  }
}

.bp-image-auto-ratio {
  .bp-image-img {
    aspect-ratio: auto;
  }
}