_article.scss

article {
    @include drop-shadow;

    color:              $color-text;
    background-color:   $color-text-background;
    border-radius:      $border-radius;
    padding:            2rem;

    @include medium-is-phone {
        padding: 1rem;
    }

    max-width:      60rem;
    position:       relative;

    /* Having auto-margins will wiggle the article into the center */
    margin-left:    auto;
    margin-right:   auto;
    margin-bottom:  2rem;

    /* Last article needs no bottom margin */
    &:last-child {
        margin-bottom:  0;
    }

    h1, h2, h3 {
        @include font-heading;

        margin-top:     0.5rem;
        margin-bottom:  0.25rem;

        &:not(:first-child) {
            margin-top:     2rem;
            margin-bottom:  0.5rem;
        }
    }

    h4, h5, h6 {
        margin-top:     0.4rem;
        margin-bottom:  0.2rem;

        &:not(:first-child) {
            margin-top:     1.6rem;
            margin-bottom:  0.4rem;
        }
    }

    figure {
        figcaption {
            @include font-subscript;

            margin-top: 0.5rem;
            text-align: left;
        }
    }

    /* Lists should be indented a bit
     * Also the flex allows them to deal with adjacent floats.
     */
    ul, ol {
        display:        flex;
        flex-flow:      column nowrap;
        margin-left:    1rem;
    }

    p {
        margin-top:     0.25rem;
        margin-bottom:  0.50rem;
    }