* {
    box-sizing: border-box;
}
body {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
.box {
    --columns: 10;
    --width: 1;
    flex-basis: calc(var(--width) / var(--columns) * 100% - 2px);
    border: 5px solid white;
}
#header {
    background-color: red;
    --width: 10;
    height: 300px;
}
#sidebar-1 {
    background-color: greenyellow;
    --width: 2;
    height: 100vh;
}
#main {
    background-color: blue;
    --width: 6;
    height: 100vh;
}
#sidebar-2 {
    background-color: magenta;
    --width: 2;
    height: 100vh;
}
@media (max-width: 900px) {
    #sidebar-1 {
        --width: 4;
    }
    #main {
        --width: 6;
    }
    #sidebar-2 {
        --width: 10;
        height: 10vh;
    }
}
@media (max-width: 420px) {
    .box {
        border: 0px solid white;
    }
    #sidebar-1 {
        --width: 10;
        height: 10vh;
    }
    #main {
        --width: 10;
    }
    #sidebar-2 {
        --width: 10;
        height: 10vh;
    }
}