.main_container {
    display: flex;
    flex-flow: column wrap;
    padding: 1% 1% 1% 1%;
    gap: 15px 0;
}

/* Hide the accessibility text used by screen readers */
#section_accessibility {
    display: none;
}

aside {
    display: flex;
    flex-flow: column wrap;
    color: var(--Text);
    background-color: var(--Base);
    font-size: 120%;
    width: 100%;
    border-radius: 8px;
    padding: 0 2% 0 2%;
    order: 1;
}

section {
    display: flex;
    flex-flow: column wrap;
    gap: 15px 0;
    order: 2;
}

aside a {
    color: var(--Text);
    text-decoration: none;
    padding: 5px 0 5px 5px;
    width: 100%;
    text-align: center;
    font-size: 90%;
}

aside a:hover,
aside a:focus {
    background-color: var(--Maroon);
    color: var(--Crust);
}

aside a:focus {
    outline: none;
}

aside>h2 {
    text-align: center;
}

/* Figure controls the img and figcaption elements */
figure {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* 
 * Selectively apply border-radius. We want the img and figcaption
 * to look like they're part of the same element.
 */
#hero_image {
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

figcaption {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

article,
figcaption {
    background-color: var(--Base);
    color: var(--Text);
    font-size: 120%;
    padding: 0 2% 0 2%;
    margin: 0;
}

article>p,
figcaption {
    font-size: 90%;
    margin: 0;
}

article {
    padding-bottom: 2%;
    border-radius: 8px;
}

article>h2 {
    text-align: center;
}

/* Medium devices (landscape tablets, 960px and up) */
@media only screen and (min-width: 960px) {
    .main_container {
        flex-flow: row nowrap;
        gap: 0 15px;
    }

    aside {
        min-width: 25%;
        order: 2;
    }

    section {
        min-width: 60%;
        gap: 15px 0;
        order: 1;
    }

    figure {
        margin: 0;
    }
}