cyb/src/pages/robot/Layout/RobotHeader/RobotHeader.module.scss

// .wrapper {
//   &::before {
//     content: '';
//     filter: blur(15px);
//     position: absolute;
//     left: 0;
//     right: 0;
//     top: -15px;
//     height: 110%;
//     background-color: black;
//   }
//   // margin-bottom: 20px;
//   // position: sticky;
//   top: 90px;
//   // z-index: 1;
// }

.content {
  display: grid;
  grid-template-columns: 1fr 75px 1fr;
  align-items: start;
  justify-items: center;
  padding: 8px;

  .level,
  .addressName {
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    // top of text aligns with center of 75px avatar sphere
    padding-top: calc(75px / 2);
  }

  .name {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
  }
  .name span {
    color: var(--grayscale-dark);
  }

  img {
    height: 75px;
    width: 75px;
  }

  > div {
    text-align: center;
  }
}