*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background: linear-gradient(to bottom, #ffffff, #e2e2e2);
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    container-name: wrapper;
    container-type: inline-size;
}

.container {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
    container-name: board;
    container-type: inline-size;

    @container wrapper (min-width: 1000px) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}

.board {
    width: 90%;
    height: 90%;
    background: rgb(255, 255, 255);
    box-shadow: 0px 16px 20px 0 rgba(89, 96, 30, 0.17);
    position: relative;
}

.board::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, rgba(255, 255, 255, .01),
            rgba(255, 255, 255, .3));
}

.blue {
    background: rgb(0, 0, 255);
}

.red {
    background: rgb(255, 0, 0);
}

.yellow {
    background: rgb(255, 255, 0);
}

.orange {
    background: rgb(255, 165, 0);
}

.green {
    background: rgb(0, 128, 0);
}

.purple {
    background: rgb(128, 0, 128);
}