// Basic layout of content
body > main {
    @extend .row;

    & > header {
        @extend .col-12;
        margin-bottom: $spacer * 2;
    }

    & > section {
        @extend .col-xl-8;
        @extend .col-12;
    }

    & > aside {
        @extend .col-xl-4;
        @extend .col-12;

        nav ul {
            list-style: none;
            padding-left: 0;
        }
    }
}

aside,
main > header {
    h1, h2, h3, h4, h5, h6 {
        padding : 0;
        margin: 0;
    }
}

section > article {
    margin-bottom: 4rem;

    &:last-of-type {
        margin-bottom: 0;
    }
}

article {
    &:first-of-type {
        padding-top: 0;
    }

    main {
        h1:first-of-type {
            padding-top: 0;
        }
    }

    & > header {
        font-size: 1.25em;
        margin-bottom: $spacer * 2;

        h1, h2, h3, h4, h5, h6 {
            padding-bottom: 0;
        }

        p {
            font-size: 0.75em;
            margin: 0;
        }
    }
}

main > article > main > h2:first-of-type,
main > section > h2:first-of-type,
main article h1 {
    padding-top: 0;
}

aside {
    h1 {
        font-size: 1.5em;
    }

    nav {
        h1 {
            font-size: 1.25em;
        }
    }
}

@media (max-width: 1439px) {
    body > main > aside {
        margin-top: $spacer * 4;
        padding-bottom: 0;

        h1, h2, h3, h4, h5, h6 {
            margin-bottom: 0;
        }

        li {
            margin-right: $spacer;
            line-height: $spacer * 2;
        }

        nav li {
            display: inline;
        }
    }

    article {
        padding-top: 0;

        header h1 {
            padding-top: 0;
        }
    }
}
@media (max-width: 768px) {
    body > main > aside {
        nav li {
            display: block;
        }
    }
}


// Make main text on pages and blog posts readable
article main,
main > section {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

    li,
    p {
        // SOURCE: https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
        /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
        word-break: break-all;

        /* Non standard for webkit */
        word-break: break-word;
    }

    p {
        text-align: justify;
    }
    header p {
        text-align: inherit;
    }
}