/* 📱 Extra Small devices (small phones, < 320px) */

@media only screen and (max-width: 319px) {}


/* 📱 Small to Medium devices (phones: 320px–600px) */

@media only screen and (min-width: 320px) and (max-width: 600px) {
    article.article,
    aside#aside {
        flex: 1 1 100%;
        /* Each takes full width */
    }
}


/* 📱📲 Tablets Portrait (601px–768px) */

@media only screen and (min-width: 601px) and (max-width: 768px) {
    article.article,
    aside#aside {
        flex: 1 1 100%;
        /* Each takes full width */
    }
}


/* 💻 Medium Laptops / Desktops (993px–1200px) */

@media only screen and (min-width: 768px) and (max-width: 1025px) {
    article.article {
        flex: 65;
        /* Half of the gap subtracted */
    }
    aside#aside {
        flex: 35;
        /* Half of the gap subtracted */
    }
}


/* 🖥️ Large Screens / Big Desktops (1201px and up) */

@media only screen and (min-width: 1026px) {
    article.article {
        flex: 69;
        /* Half of the gap subtracted */
    }
    aside#aside {
        flex: 31;
        /* Half of the gap subtracted */
    }
}