.nut-facegraph {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;

  .nut-facegraph__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .nut-facegraph__icon {
      svg {
        width: 25px;
        height: 25px;
        color: rgba(140, 145, 161, 1);
      }
    }

    .nut-facegraph__text {
      margin-top: 5px;
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0.05em;
      font-variation-settings: 'opsz' auto;
      color: rgba(0, 0, 0, 0.85);
      white-space: nowrap;
    }
  }

  .nut-facegraph__item--checked {
    .nut-facegraph__icon svg {
      color: #2c68ff;
    }
    .nut-facegraph__text {
      color: #2c68ff;
    }
  }
}