.chessboard {
  display: grid;
  grid-template-columns: repeat(8, auto);
  width: fit-content;
  border: 2px solid gray;
  font-size: 1.5em;
  margin-top: 1em;
}
.board-row {
  display: contents;
}
.chess-piece, .chess-square {
  width: 1.7em;
  height: 1.7em;
  text-align: center;
  line-height: 1.7em;
}

/* Light squares */
.chessboard .board-row:nth-child(odd) > span:nth-child(odd),
.chessboard .board-row:nth-child(even) > span:nth-child(even) {
    background-color: rgba(128, 128, 128, 0.15);
}

/* Dark squares */
.chessboard .board-row:nth-child(odd) > span:nth-child(even),
.chessboard .board-row:nth-child(even) > span:nth-child(odd) {
    background-color: rgba(128, 128, 128, 0.35);
}