:root {
    --color-light: #f0d9b5;
    --color-dark: #b58863;
}

.chessboard {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    grid-template-rows: repeat(8, 12.5%);
    grid-template-columns: repeat(8, 12.5%);
    background-color: var(--color-light);
}

.chessboard div:nth-child(16n+16),
.chessboard div:nth-child(16n+14),
.chessboard div:nth-child(16n+12),
.chessboard div:nth-child(16n+10),
.chessboard div:nth-child(16n+7),
.chessboard div:nth-child(16n+5),
.chessboard div:nth-child(16n+3),
.chessboard div:nth-child(16n+1) {
    background-color: var(--color-dark);
}

.w-1\/8 {
    width: 12.5%;
}

.h-1\/8 {
    height: 12.5%;
}

/* Left alignment */
.left-1\/8 {
    left: 12.5%
}

.left-2\/8 {
    left: 25%
}

.left-3\/8 {
    left: 37.5%
}

.left-4\/8 {
    left: 50%
}

.left-5\/8 {
    left: 62.5%
}

.left-6\/8 {
    left: 75%
}

.left-7\/8 {
    left: 87.5%
}