body {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.field {
  aspect-ratio: 1;
}
.field[x="0"][y="0"],
.field[x="0"][y="2"],
.field[x="0"][y="4"],
.field[x="0"][y="6"],

.field[x="1"][y="1"],
.field[x="1"][y="3"],
.field[x="1"][y="5"],
.field[x="1"][y="7"],

.field[x="2"][y="0"],
.field[x="2"][y="2"],
.field[x="2"][y="4"],
.field[x="2"][y="6"],

.field[x="3"][y="1"],
.field[x="3"][y="3"],
.field[x="3"][y="5"],
.field[x="3"][y="7"],

.field[x="4"][y="0"],
.field[x="4"][y="2"],
.field[x="4"][y="4"],
.field[x="4"][y="6"],

.field[x="5"][y="1"],
.field[x="5"][y="3"],
.field[x="5"][y="5"],
.field[x="5"][y="7"],

.field[x="6"][y="0"],
.field[x="6"][y="2"],
.field[x="6"][y="4"],
.field[x="6"][y="6"],

.field[x="7"][y="1"],
.field[x="7"][y="3"],
.field[x="7"][y="5"],
.field[x="7"][y="7"] {
  background-color: #eee;
}
div#board {
  --board-height: 90vh;
  aspect-ratio: 1;
  height: 90vh;
  background: #495d4b;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto;
}
div#characters {
  display: contents;
}
div#characters > div {
  position: absolute;
  width: calc(var(--board-height)/8);
  height: calc(var(--board-height)/8);
}
div#characters > div > img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}