/*

Wrappers

Elements with max widths and paddings that can be used to separate content

Markup:
<div class="wrapper {{modifier_class}}">
    Wrapper
</div>

.-thin - A max-width of 45rem
.-wide - A max-width of 80rem
.-flush - No vertical or horizontal spacing

Styleguide 6.0

*/

.wrapper {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 60rem;
    padding: var(--rhythm-double) var(--rhythm-half);
    width: 100%;
}

.wrapper.-thin {
    max-width: 45rem;
    padding: var(--rhythm) var(--rhythm-half);
}

.wrapper.-wide {
    max-width: 80rem;
    padding: var(--rhythm-triple) var(--rhythm-half);
}

.wrapper.-flush {
    padding: 0 var(--rhythm-half);
}