.lock-board {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 3rem;
  position: relative;
}

.lock-board-order {
  color: white;
  font-size: 1.5rem;
  text-align: center;
  padding: 2rem 0;
}

.lock-feedback {
  text-align: center;
  font-size: 0.8rem;
  color: white;
  padding: 0 0 2.5rem;
  height: 55px;
}

.lock-feedback.wrong {
  animation: pop 0.3s linear 1;
}

#lock-board-drawer {
  position: absolute;
  transition: opacity 0.3s ease;
}

.lock-board-item-wrapper {
  padding: 0.5rem;
  border: 2px solid white;
  border-radius: 50%;

  transition: border-color 0.2s ease;
}

.lock-board-item-wrapper.selected {
  animation: pop 0.3s linear 1;
  border-color: #fbe374;
}

.lock-board-item-wrapper.selected .lock-board-dot {
  background-color: #fff200;
}

@keyframes pop {
  50% {
    transform: scale(1.2);
  }
}

.lock-board-dot {
  width: 0.75rem;
  height: 0.75rem;
  background-color: white;
  border-radius: 50%;

  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */

  transition: background-color 0.2s ease;
}