@import '../../../global.less';

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.banner {
  width: 100%;
  height: 200px;
  position: relative;
  flex-shrink: 0;
}

.info {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-55%);

  display: flex;
  flex-direction: column;
  align-items: center;

  :global {
    .avatar {
      @size: 68px;
      width: @size;
      height: @size;
      overflow: hidden;
      color: @primary-color;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: @bg-color;
      font-size: 2rem;
      font-weight: bold;
      border-radius: 50%;
      border: 2px solid @primary-color;
    }

    .name {
      margin-top: 8px;
      font-size: 1.3rem;
    }
  }
}

.content {
  flex-grow: 1;
  overflow: auto;

  :global {
    .group {
      margin: 8px;
    }
  }
}
