.Prose {
    @include font(body);
    max-width: 44em;
    font-feature-settings: "liga", "dlig", "kern", "onum";
    hanging-punctuation: first;

    > *:not(:last-child) {
        margin-bottom: 0.75em;
    }

    ul,
    ol {
        @include padding-inline(start, 1.25em);
    }

    li,
    li > ul,
    li > ol {
        margin-bottom: 0.25em;
    }

    ul > li {
        list-style-type: square;
    }

    ol > li {
        list-style-type: decimal;
    }

    h1 {
        @include font(title);
    }

    h2 {
        @include font(heading);
        margin-bottom: 1em;
        color: $color-heading;
    }

    *:not(hr) + h2 {
        margin-top: 2em;
    }

    h3 {
        @include font(subHeading);
        margin-bottom: 0.75em;
        opacity: 0.8;
    }

    * + h3 {
        margin-top: 2.25em;
    }

    hr {
        height: 0;
        border: 0;
        border-top: 0.125rem solid $color-frame-border;
        margin: 2em 0;
    }

    abbr {
        font-feature-settings: "c2sc";
    }

    blockquote {
        @include border-inline(start, solid rgba($color-text, 0.25));
        @include padding-inline(start, 1em);
        opacity: 0.75;
    }

    code,
    code pre {
        background-color: rgba($color-text, 0.075);
    }

    img {
        max-width: 100%;
    }

    p code,
    li code {
        padding: 0.125rem;
    }

    code pre {
        padding: 0.125rem 0.5rem;
        margin: 1rem -0.5rem;
        overflow: auto;
    }

    table {
        width: 100%;
        margin: 1rem -0.5rem;
        border-collapse: collapse;
        font-size: 0.875rem;
        font-feature-settings: "lnum" 1, "tnum" 1;
    }

    caption {
        @include font(caption);
        padding: 0 0.5rem;
        font-style: italic;
        text-align: start;
        color: rgba($color-text, 0.75);
        opacity: 0.8;
    }

    td,
    th {
        padding: 0.75em 0.5rem;
        text-align: start;

        // text-align: start isn't fully supported for th elements
        [dir="ltr"] & { text-align: left; }
        [dir="rtl"] & { text-align: right; }
    }

    tr:nth-child(even) {
        background-color: rgba($color-text, 0.05);
    }

    th {
        background-color: rgba($color-text, 0.075);
        border-bottom: 1px solid rgba($color-text, 0.1);
    }
}

.Prose--condensed {

    > * {
        margin-bottom: 0.50em;
    }

    li,
    li > ul,
    li > ol {
        margin-bottom: 0.15em;
    }

    *:not(hr) + h2 {
        margin-top: 1em;
    }

    h3 {

        margin-bottom: 0.55em;
        opacity: 0.8;
    }

    * + h3 {
        margin-top: 1.25em;
    }

    hr {
        margin: 1em 0;
    }

}