/* desktop devices */
@media (min-width: 768px) {
    aside {
        flex: 200px 0 0;
    }
}

/* mobile devices */
@media (max-width: 768px) {
    aside {
        width: 100%;
    }
}

body {
    --accent-color: #d26c6c;

    background-color: #e3e3e3;
    accent-color: var(--accent-color);

    display: flex;
    flex-flow: row wrap;
}

header {
    flex-grow: 1;
    flex-basis: 100%;

    margin: 10px;
}

aside {
    background-color: white;

    text-align: center;

    border: 1px solid black;
    border-radius: 3px;
    padding: 15px;

    margin: 10px;
}

article {
    background-color: white;

    border: 1px solid black;
    border-radius: 3px;

    padding: 15px;

    flex: 2 0px;

    margin: 10px;
}

footer {
    background-color: white;

    flex-grow: 1;
    flex-basis: 100%;

    margin: 10px;
}