<style>

body {
    font-family: "Times New Roman";
    background-color: blue;
    padding:15px;
}

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.box {
    background-color: white;
}

/* medium screens */
@media screen and (max-width: 992px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* the smaller screens */
@media screen and (max-width: 600px) {
    .container {
        grid-template-columns: 1fr;
    }
}

</style>