.dice {
    --dice-width: 40px;

    padding: 2px;

    width: var(--dice-width);
    height: var(--dice-width);
    background-color: beige;
    border-radius: 3px;
    border-width: 2px;
    border-color: black;
    border: solid;

    display: grid;
    grid-template-columns: repeat(3, calc((var(--dice-width) - 0px) / 3));
    grid-template-rows: repeat(3, calc((var(--dice-width) - 0px) / 3));
}

.face-elem {
    width: 8px;
    height: 8px;
    background-color: black;
    border-radius: 8px;
    border-width: 2px;
    border-color: black;
    border: solid;
}

/* Rolled a 1 */
.face-elem:nth-child(1):nth-last-child(1) {
    grid-column: 2;
    grid-row: 2;
}

/* Rolled a 2 */
.face-elem:nth-child(1):nth-last-child(2) {
    grid-column: 1;
    grid-row: 1;
}

.face-elem:nth-child(2):nth-last-child(1) {
    grid-column: 3;
    grid-row: 3;
}

/* Rolled a 3 */
.face-elem:nth-child(1):nth-last-child(3) {
    grid-column: 1;
    grid-row: 1;
}

.face-elem:nth-child(2):nth-last-child(2) {
    grid-column: 2;
    grid-row: 2;
}

.face-elem:nth-child(3):nth-last-child(1) {
    grid-column: 3;
    grid-row: 3;
}

/* Rolled a 4 */
.face-elem:nth-child(1):nth-last-child(4) {
    grid-column: 1;
    grid-row: 1;
}

.face-elem:nth-child(2):nth-last-child(3) {
    grid-column: 3;
    grid-row: 1;
}

.face-elem:nth-child(3):nth-last-child(2) {
    grid-column: 1;
    grid-row: 3;
}

.face-elem:nth-child(4):nth-last-child(1) {
    grid-column: 3;
    grid-row: 3;
}

/* Rolled a 5 */
.face-elem:nth-child(1):nth-last-child(5) {
    grid-column: 1;
    grid-row: 1;
}

.face-elem:nth-child(2):nth-last-child(4) {
    grid-column: 3;
    grid-row: 1;
}

.face-elem:nth-child(3):nth-last-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.face-elem:nth-child(4):nth-last-child(2) {
    grid-column: 1;
    grid-row: 3;
}

.face-elem:nth-child(5):nth-last-child(1) {
    grid-column: 3;
    grid-row: 3;
}

/* Rolled a 6 */
.face-elem:nth-child(1):nth-last-child(6) {
    grid-column: 1;
    grid-row: 1;
}

.face-elem:nth-child(2):nth-last-child(5) {
    grid-column: 1;
    grid-row: 2;
}

.face-elem:nth-child(3):nth-last-child(4) {
    grid-column: 1;
    grid-row: 3;
}

.face-elem:nth-child(4):nth-last-child(3) {
    grid-column: 3;
    grid-row: 1;
}

.face-elem:nth-child(5):nth-last-child(2) {
    grid-column: 3;
    grid-row: 2;
}

.face-elem:nth-child(6):nth-last-child(1) {
    grid-column: 3;
    grid-row: 3;
}