.qu-board-bar {
  display: inline-block;
}

.qu-board-title {
  font-size: 28px;
  color: #999;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding: 0 var(--main-space);

  & > text {
    line-height: 3em;
    &:first-of-type {
      margin-left: 0.6em;
    }
  }
}

.qu-board-wrapper {
  background: #fff;

  .qu-board-bd {
    padding: var(--main-space) calc(var(--main-space) * 2);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 36px;
    column-gap: 36px;

    .qu-board-bd-item {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      display: grid;
      place-items: center;
      font-size: 30px;
      color: #666;
      font-weight: bold;
      border: 2px solid var(--main-bg-color);

      &.qu-board-bd-active {
        color: #fff;
        border: 2px solid transparent;
        background-color: var(--main-bg-color);
      }
    }
  }
}
