body {
    background-color: rgb(231, 231, 255);
}

.box {

    border: 1px solid gray;
    height: 30vw;
    width: 30vw !important;
    padding: 0px !important;
}

.imgMuestra {
    height: 300px;
    width: 300px;
}
.imgMuestra img{
    height: 300px;
    width: 300px;
}

@media print,
screen and (min-width: 40em) {
    .box {

        border: 1px solid gray;
        height: 150px;
        width: 150px !important;
        padding: 0px !important;
    }
}

@media print,
screen and (min-width: 64em) {
    .box {

        border: 1px solid gray;
        height: 150px;
        width: 150px !important;
        padding: 0px !important;
    }
}



.box p {
    background-color: white;
    padding: 0px 7px;
    border-radius: 0 0 50% 0;
    font-weight: bold;
    color: #F06D56;
    position: absolute;
}

[x="1"][y="1"] {
    border-radius: 5px 0 0 0;
}

[x="3"][y="1"] {
    border-radius: 0 5px 0 0;
}

[x="1"][y="3"] {
    border-radius: 0 0 0 5px;
}

[x="3"][y="3"] {
    border-radius: 0 0 5px 0;
}



[value="0"] {
    /* background-color: rgba(255, 255, 255, 0.5); */
    background-size: cover;
    background-image: url("../img/x-09.png");
}

[value="1"] {
    /* background-color: rgba(255, 0, 0, 0.486); */
    background-size: cover;
    background-image: url("../img/x-01.png");
}

[value="2"] {
    /* background-color: blue; */
    background-size: cover;
    background-image: url("../img/x-02.png");
}

[value="3"] {
    /* background-color: green; */
    background-size: cover;
    background-image: url("../img/x-03.png");
}

[value="4"] {
    /* background-color: yellow; */
    background-size: cover;
    background-image: url("../img/x-04.png");
}

[value="5"] {
    /* background-color: orange; */
    background-size: cover;
    background-image: url("../img/x-05.png");
}

[value="6"] {
    /* background-color: pink; */
    background-size: cover;
    background-image: url("../img/x-06.png");
}

[value="7"] {
    /* background-color: burlywood; */
    background-size: cover;
    background-image: url("../img/x-07.png");
}

[value="8"] {
    /* background-color: purple; */
    background-size: cover;
    background-image: url("../img/x-08.png");
}