html, body {
    height: 100%;
    min-height: 100%;  
    margin: 0;
    padding: 0;
}

.color {
    box-sizing: border-box;
    width: 25%;
    height: 100%;
    float: left;
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-top: none;
    border-bottom: none;
}
.color:first-child {
    border-left: none;
}
.color:last-child {
    border-right: none;
}

@media only screen and (max-aspect-ratio: 1/1) {
    .color {
        width: 100%;
        height: 25%;
        float: none;
        border-left: none;
        border-right: none;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
    }
    .color:first-child {
        border-top: none;
    }
    .color:last-child {
        border-bottom: none;
    }
}

#a {
    background-color: #2743d2;
}
#b {
    background-color: #0075c2;
}
#c {
    background-color: #0775c4;
}
#d {
    background-color: #66ccff;
}