.img {
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  &-xl {
    width: 14rem;

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  &-lg {
    width: 12rem;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      border-radius: 4px;
      &.contain {
        object-fit: contain;
      }
    }
  }
  &-md {
    width: 8rem;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  &-sm {
    height: 2rem;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  &-404 {
    width: 445px;
    @include media-breakpoint-down(md) {
      width: 300px;
    }
    img {
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
  }
  &-landscape {
    @include aspect-ratio-box(16, 9);
  }
  &-portrait {
    @include aspect-ratio-box(4, 4);
    &-02 {
      @include aspect-ratio-box(6, 4);
    }
  }
}

.avatar {
  width: 152px;
  height: 152px;
  border-radius: 50%;
  margin: 0 auto;
  @include media-breakpoint-down(md) {
    height: 100px;
    width: 100px;
  }
  img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  &-sm {
    height: 64px;
    width: 64px;
    margin: unset;
    background: white;
    .icon {
      [class^="ic-"],
      [class*=" ic-"] {
        @include rfs(32px);
        color: $primary;
      }
    }
  }
  &-bordered {
    border: 4px solid $primary;
  }
  // &-icon {
  // 	height: 64px;
  // 	width: 64px;
  // 	margin: 0;
  // 	background-color: red;
  // 	.icon {
  // 		[class^='ic-'],
  // 		[class*=' ic-'] {
  // 			@include rfs(32px);
  // 			object-fit: cover;
  // 		}
  // 	}
  // }
}

.image--bg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  @include media-breakpoint-down(lg) {
    display: none;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    @include media-breakpoint-down(sm) {
      object-position: left;
    }
  }
}