ds-site/Resources/Public/Css/layout.css

* {
    box-sizing: border-box;
}

/* Header */
body > header {
    font-family: var(--ds-font-family-sans-serif);
    letter-spacing: 0.5em;
    word-spacing: 0.75em;
    font-weight: lighter;
    box-sizing: content-box;

    padding-bottom: calc(var(--ds-spacer) * 4);
}
body > header a {
    font-size: calc(var(--ds-font-size-base) * 3.5);
    text-decoration: none;
}
body > header small {
    font-size: 1em;
}
@media (max-width: 768px) {
    body > header a {
        font-size: .75em;
    }
    body > header small {
        display: none;
    }
}
@media (max-width: 1439px) {
    body > header {
        padding-bottom: var(--ds-spacer);
    }
}

/* Footer */
body > footer {
    padding-top: calc(var(--ds-spacer) * 2);
    padding-bottom: calc(var(--ds-spacer) * 2);
    text-align: center;
}
body > footer nav {
    padding-bottom: var(--ds-spacer);
}

/* Content */
body {
    word-break: break-word;
    background-color: #2E3436;
    color: #D3D7CF;
    font-family: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
    font-size: 1.25rem;
    line-height: 1.5;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px) {
    body {
        max-width: 1023px;
    }
}
@media (min-width: 768px) {
    body {
        max-width: 1024px;
    }
}
@media (min-width: 1200px) {
    body {
        max-width: 1200px;
    }
}
@media (min-width: 1440px) {
    body {
        max-width: 1440px;
    }
}
body > main {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

body > main > header {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: calc(var(--ds-spacer) * 2);
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
body > main > aside {
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 1440px) {
    body > main > aside {
        order: 3;
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%;
    }
}

body > main > aside nav ul {
    list-style: none;
    padding-left: 0;
}

body > main > section {
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 1440px) {
    body > main > section {
        order: 2;
        flex: 0 0 66.66666667%;
        max-width: 66.66666667%;
    }
}

body > main article > aside {
    margin-bottom: calc(var(--ds-spacer) * 2);
}

body > main article > aside nav ul {
    list-style: none;
    padding-left: 0;
}

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

section > article {
    margin-bottom: 4rem;
}
section > article :last-of-type {
    margin-bottom: 0;
}

article {
    margin-top: 2.75em;
}
article:first-of-type {
    padding-top: 0;
    margin-top: 0;
}
article main h1:first-of-type {
    padding-top: 0;
}
article > header {
    font-size: 1.25em;
    margin-bottom: calc(var(--ds-spacer) * 2);
}
article > header h1,
article > header h2,
article > header h3,
article > header h4,
article > header h5,
article > header h6 {
    padding-bottom: 0;
}
article > header h1 {
    font-size: 1.17em;
}
article > header 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 details > summary > h2,
nav details > summary > h2 {
    display: inline;
}

@media (max-width: 1439px) {
    body > main aside {
        padding-bottom: 0;
    }
    body > main aside h1,
    body > main aside h2,
    body > main aside h3,
    body > main aside h4,
    body > main aside h5,
    body > main aside h6 {
        margin-bottom: 0;
    }
    body > main aside li,
    body > main article > aside li {
        margin-right: var(--ds-spacer);
        line-height: calc(var(--ds-spacer) * 2);
    }
    body > main aside nav ul,
    body > main article > aside nav ul {
        columns: 4;
    }

    article {
        padding-top: 0;
    }
    article header h1 {
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    body > main article aside nav ul,
    body > main aside nav ul{
        columns: 2;
    }
}

body.LayoutContent article {
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
body.LayoutContent article,
body.LayoutContent article > header,
body.LayoutContent article > aside,
body.LayoutContent article > main {
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
@media (max-width: 1023px) {
    body.LayoutContent article,
    body.LayoutContent article > main {
        padding-right: 0;
    }
}
@media (min-width: 1440px) {
    body.LayoutContent article {
        order: 2;
    }
    body.LayoutContent article > header {
        order: 1;
    }
    body.LayoutContent article > aside {
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%;
        order: 3;
    }
    body.LayoutContent article > main {
        flex: 0 0 66.66666667%;
        max-width: 66.66666667%;
        order: 2;
    }
}