/* 📱 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 */
    }
}