body > main {
    @extend .row;

    & > header {
        @extend .col-12;
    }

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

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

        // For padding
        @extend article;

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

@media (max-width: 1439px) {
    body > main > aside {
        padding-bottom: 0;

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

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

        nav li {
            display: inline;
        }
    }
}
@media (min-width: 1440px) {
    section {
        & > a:first-child + {
            h1, h2, h3, h4, h5, h6 {
                margin-top: $spacer * 4;
            }
        }
    }
}

li {
    padding: {
        bottom: $spacer / 2;
        top: $spacer / 2;
    }
}

section {
    & > header {
        font-size: 1.5em;
        padding-bottom: $spacer * 2;
    }
}

article {
    padding: {
        top: $spacer * 2;
        bottom: $spacer * 2;
    }

    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 0;
        padding: {
            top: $spacer * 2;
            bottom: $spacer;
        }
    }

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

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

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

article main,
main > section {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

    p {
        text-align: justify;

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