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;
    }

    mjx-container {
        overflow:   auto;
        // Padding required to prevent a vertical scrollbar showing up
        padding:    0.25rem;
    }

    hr {
        margin-top:     1rem;
        margin-bottom:  1rem;
        border:         0;
        border-top:     1px solid rgba(0, 0, 0, 0.1);
    }

    blockquote {
        /* Setting a flex display to allow the proper border rendering
         * if placed next to a floating element. */
        display:        flex;
        color:          $color-helmoltz-gray;
        border-left:    2px solid $color-content-light-gray;
        padding-left:   0.5rem;
        margin-left:    0;
        margin-right:   0;
    }

    code,
    pre {
        font-family: "mononoki";
        font-size:   0.75rem;
    }

    video {
        display:    block;

        /* Ensure videos stay within their container */
        max-width:  100%;
        max-height: 100%;
    }
}