/* Containers */

:root {
    --container:        64rem;
    --xs-container:     24rem;
    --sm-container:     32rem;
    --md-container:     42rem;
    --lg-container:     60rem;
    --max-container:    76rem;
}

body {
    margin: 0;
    overflow-x: hidden;
}

header,main,section {display: block;}

.container {
    width: 100%;
    box-sizing: border-box;
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto
}
.xs-container   { max-width: var(--xs-container); }
.sm-container   { max-width: var(--sm-container); }
.md-container   { max-width: var(--md-container); }
.lg-container   { max-width: var(--lg-container); }
.max-container  { max-width: var(--max-container); }

@media(min-width: 768px){
    .container-offset {
        margin-right: var(--nav-width);
    }
}