.base-logo {
  width: 100%;
  img:not([lazy="loaded"]) {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  img[lazy="loaded"] {
    object-fit: contain;
    object-position: center;
  }
}
@include respond-to("small") {
  .base-logo {
    margin: 0 auto;
  }
}

@include respond-to("medium-up") {
  .base-logo {
    img {
      max-height: none;
    }
  }
}

.avatar-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background-image: url("https://res.cloudinary.com/btbassets/image/upload/v1636024692/icons/avatar-placeholder.png");
  background-position: center;
  background-size: contain;
  img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
}