/* ============================================================================
   05-OBJECTS -> #CONTAINER
   ========================================================================= */

/**
 * Contains content and centrally aligns it within the viewport.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Container
 *
 * 1. Create a custom property for the horizontal gutter so it can easily be
 *    changed with modifier classes.
 * 2. Create a custom property for the vertical gutter so it can easily be
 *    changed with modifier classes.
 */

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--grid-gutter-x) * .5);
    padding-right: calc(var(--grid-gutter-x) * .5);
    width: 100%;
}