*{
    margin: 0;
    padding: 0;
}
body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h2 {
    color: blueviolet;
}
.cajapadre{
    padding: 1em;
    display: grid;
}
.caja{
    margin: 1em;
}
/*todo lo que se ponga dentro de las llaves solo aplicara con 600px*/
@media (max-width:600px) {
    .cajapadre{
        background-color: gray;
          grid-template-columns: repeat(1, 1fr);
    }
    .caja{
        background-color: white;    }
}
@media (max-width:900px) and (min-width:601px){
    .cajapadre{
        background-color: rgb(214, 225, 9);
          grid-template-columns: repeat(2, 1fr);
    }
    .caja{
        background-color: orange;
    }
}
@media (min-width:901px) {
    .cajapadre{
        background-color: rgb(6, 192, 6);
          grid-template-columns: repeat(4, 1fr);
    }
    .caja{
        background-color: green;
    }
}