* {margin: 0; padding: 0; border: 0; box-sizing: border-box}

@media only screen and (min-width: 1100px) {
    body {
        background-color: rosybrown;
        width: 80vw;
        border: 2px white solid;
        margin: 2px auto;
    }
    #top div, #mid div, #foot div {
        height: 30vh;
        border: white 2px solid;
        /* width: 30vh; */
    }
    #top {
        display: flex;
        justify-content: center;
    }
    #top div {
        width: 50%;
    }
    #mid {
        display: flex;
        justify-content: center;
    }
    #mid div {
        min-width: 30vh;
        flex-grow: 1;
    }
}

@media only screen and (max-width: 1100px) {
    body {
        background-color: rosybrown;
        width: 80vw;
        border: 2px white solid;
        margin: 2px auto;
    }
    #top div, #mid div, #foot div {
        height: 30vh;
        border: white 2px solid;
        /* width: 30vh; */
    }
    #top {
        display: flex;
        justify-content: center;
    }
    #top div {
        width: 50%;
    }
}

#top div:nth-child(1) {
    background-color: tomato;
}

#top div:nth-child(2) {
    background-color: thistle;
}

#mid div:nth-child(1) {
    background-color: tan;
}

#mid div:nth-child(2) {
    background-color: teal;
}

#mid div:nth-child(3) {
    background-color: seashell;
}

#foot div {
    background-color: skyblue;
}
/* big 2 3 1 */
/* small 2 1 1 1 1 */