* {
    border: 1px dashed black;
    box-sizing: border-box;
    margin: 0;
}

body {
    min-height: 99vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

main>article {
    flex-grow: 1;
}

@media (min-width: 600px) {
    main {
        flex-direction: row;
        flex-wrap: wrap;
    }

    main>article {
        flex-basis: 33.3%;
    }    
}

@media (min-width: 800px) {
    main>article {
        flex-basis: 25%;
    }
}