*{
    font-family: Arial;
}

.colorBox{
    padding: 1em;
    margin: 1em;
    border-radius: 5px;
}

@media (min-width: 640px) {
    body{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 1em;
        align-self: center;
    }

    .colorBox{
        padding: 3em;
        margin: unset;
        border-radius: 5px;
    }
}

@media (min-width: 1200px){
    body{
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 2000px){
    body{
        grid-template-columns: repeat(6, 1fr);
    }
}