.game {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;

    .box {

        width: 10vw;
        height: 10vw;

        border: 2px #fff solid;

        box-sizing: border-box;

        cursor: pointer;
    }
}

.game {

    .box {

        &#box-1 {

            border-top: 0px;
            border-left: 0px;   
        }

        &#box-2{

            border-top: 0px;
        }

        &#box-3 {

            border-top: 0px;
            border-right: 0px;
        }

        &#box-4 {

            border-left: 0px;
        }

        &#box-5 {

        }

        &#box-6 {

            border-right: 0px;
        }

        &#box-7 {

            border-bottom: 0px;
            border-left: 0px;
        }

        &#box-8 {

            border-bottom: 0px;
        }

        &#box-9 {

            border-bottom: 0px;
            border-right: 0px;
        }
    } 
}

.game.hidden {

    opacity: 0%;

    position: absolute;

    top: -100%;
}


@media (max-width: 900px) {
    
    .game {

        width: 80vw;
        height: 80vw;

        .box {
            
            width: 100%;
            height: 100%;
        }
    }
}