@layer base {
  .profile {
    pointer-events: auto;
    width: 200px;
    aspect-ratio: 2.18;
    background-image: url("./assets/profile-bg.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .avatar {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .avatarBorder {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(180deg, #eed074 0%, #a5602c 100%);
    border: 1px solid #401e08;
    box-shadow:
      4px 0px 1px -2px #00000040,
      0px 2px 0px 0px #ffefd1 inset,
      0px -2px 0px 0px #7a451c inset;
    padding: 5px;
  }

  .avatarInner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(180deg, #9e6025 0%, #feeea1 100%);
    box-shadow:
      0px -1px 0px 0px #ffffffa6 inset,
      0px 1px 0px 0px #00000040 inset;
    padding: 3px;
    overflow: hidden;
  }

  .avatarImage {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  .right {
    display: flex;
    flex-direction: column;
  }
}
