/*! suit-grid v1.1.0 | MIT License | github.com/suitcss */

/* ==========================================================================
   SUIT: Grid
   ========================================================================== */

/**
 * Core grid component
 *
 * DO NOT apply dimension or offset utilities to the `Grid` element. All cell
 * widths and offsets should be applied to child grid cells.
 *
 * Example uses:
 *
 * <div class="Grid [Grid--alignCenter|Grid--alignRight]">
 *     <div class="Grid-cell [Grid-cell--center] u-size1of2"></div>
 *     <div class="Grid-cell u-size1of2"></div>
 *     <div class="Grid-cell u-size1of3"></div>
 *     <div class="Grid-cell u-size1of3"></div>
 * </div>
 */

/* Grid container
   ========================================================================== */

/**
 * All content must be contained within child `Grid-cell` elements.
 *
 * 1. Account for browser defaults of elements that might be the root node of
 *    the component.
 * 2. Ensure consistent default alignment.
 * 3. Remove inter-cell whitespace that appears between `inline-block` child
 *    elements.
 */

.Grid {
    display: block; /* 1 */
    padding: 0; /* 1 */
    margin: 0; /* 1 */
    text-align: left; /* 2 */
    font-size: 0; /* 3 */
}

/**
 * Modifier: center align all grid cells
 */

.Grid--alignCenter {
    text-align: center;
}

/**
 * Modifier: right align all grid cells
 */

.Grid--alignRight {
    text-align: right;
}

/**
 * Modifier: middle-align grid cells
 */

.Grid--alignMiddle > .Grid-cell {
    vertical-align: middle;
}

/**
 * Modifier: bottom-align grid cells
 */

.Grid--alignBottom > .Grid-cell {
    vertical-align: bottom;
}

/* Grid cell
   ========================================================================== */

/**
 * No explicit width by default. Rely on combining `Grid-cell` with a dimension
 * utility or a component class that extends 'grid'.
 *
 * 1. Fundamentals of the non-float grid layout.
 * 2. Reset font size change made in `Grid`.
 * 3. Keeps content correctly aligned with the grid direction.
 * 4. Controls vertical positioning of units.
 * 5. Make cells full-width by default.
 */

.Grid-cell {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block; /* 1 */
    font-size: 1rem; /* 2 */
    margin: 0;
    padding: 0;
    text-align: left; /* 3 */
    vertical-align: top; /* 4 */
    width: 100%; /* 5 */
}

/**
 * Modifier: horizontally center one unit
 * Set a specific unit to be horizontally centered. Doesn't affect
 * any other units. Can still contain a child `Grid` object.
 */

.Grid-cell--center {
    display: block;
    margin: 0 auto;
}