//                  d8b      888
//                  Y8P      888
//                           888
//  .d88b.  888d888 888  .d88888
// d88P"88b 888P"   888 d88" 888
// 888  888 888     888 888  888
// Y88b 888 888     888 Y88b 888
//  "Y88888 888     888  "Y88888
//      888
// Y8b d88P
//  "Y88P"

// Grid
//
// Our responsive grid system is built using [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) and uses our [Sass Directives ➔ Grid Builder](/sassdirectives/gridbuilder) mixin to generate the grid. By default, it is a 12-column wide grid and includes five tiers of predefined classes for building complex responsive layouts.
//
// Add a `grid` class to an element that wraps around your grid cells. Any direct children of that element will be a grid cell. You can add classes to these grid cells to control their width at different screen widths. See the examples below to get a basic understanding of the code required.
//
// <table class="table table-bordered">
//   <thead>
//     <tr>
//       <th scope="col"></th>
//       <th scope="col" class="text-center">
//         Extra small<br>
//         <small>≥400px</small>
//       </th>
//       <th scope="col" class="text-center">
//         Small<br>
//         <small>≥600px</small>
//       </th>
//       <th scope="col" class="text-center">
//         Medium<br>
//         <small>≥800px</small>
//       </th>
//       <th scope="col" class="text-center">
//         Large<br>
//         <small>≥1200px</small>
//       </th>
//       <th scope="col" class="text-center">
//         Extra large<br>
//         <small>≥1600px</small>
//       </th>
//     </tr>
//   </thead>
//   <tbody>
//     <tr>
//       <th class="text-left" scope="row">Class prefix</th>
//       <td class="text-center"><code>.g-xs-</code></td>
//       <td class="text-center"><code>.g-sm-</code></td>
//       <td class="text-center"><code>.g-md-</code></td>
//       <td class="text-center"><code>.g-lg-</code></td>
//       <td class="text-center"><code>.g-xl-</code></td>
//     </tr>
//   </tbody>
// </table>
//
// Styleguide Utilities.Grid

// Sample Layouts
//
// Styleguide Utilities.Grid.SampleLayouts
//
// Weight: 1

// Simple Two-Column Layout
//
// Collapses to a single column when the screen width is less than the <strong>medium</strong> breakpoint (`800px`).
//
// Markup:
// <div class="grid">
//   <div class="g-m-6">.g-m-6</div>
//   <div class="g-m-6">.g-m-6</div>
// </div>
//
// Styleguide Utilities.Grid.SampleLayouts.SimpleTwoColumnLayout
//
// Weight: 1

// Simple Three-Column Layout
//
// Collapses to a single column when the screen width is less than the <strong>small</strong> breakpoint (`600px`).
//
// Markup:
// <div class="grid">
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
// </div>
//
// Styleguide Utilities.Grid.SampleLayouts.SimpleThreeColumnLayout
//
// Weight: 2

// Simple Four-Column Layout
//
// Collapses to two columns when the screen width is less than the <strong>small</strong> breakpoint (`600px`), and to a single column when the screen width is less than the <strong>medium</strong> breakpoint (`800px`).
//
// Markup:
// <div class="grid">
//   <div class="g-s-6 g-m-3">.g-s-6 .g-m-3</div>
//   <div class="g-s-6 g-m-3">.g-s-6 .g-m-3</div>
//   <div class="g-s-6 g-m-3">.g-s-6 .g-m-3</div>
//   <div class="g-s-6 g-m-3">.g-s-6 .g-m-3</div>
// </div>
//
// Styleguide Utilities.Grid.SampleLayouts.SimpleFourColumnLayout
//
// Weight: 3

// Complex Multi-Row Layout
//
// Our grid system doesn’t limit you to a single row. Your content can flow onto multiple rows at different screen widths.
//
// <div class="panel state-warning">
//
// # Tip
// Test your grid at different screen widths to ensure that things collapse as you expect. If a grid cell won’t fit on a row, it will simply drop down to the next row.
//
// </div>
//
// Markup:
// <div class="grid">
//   <div class="g-m-8 g-l-6">.g-m-8 .g-l-6</div>
//   <div class="g-m-4 g-l-4">.g-m-4 .g-l-4</div>
//   <div class="g-m-6 g-l-2">.g-m-6 .g-l-2</div>
//   <div class="g-m-6 g-l-4">.g-m-6 .g-l-4</div>
//   <div class="g-m-6 g-l-4">.g-m-6 .g-l-4</div>
//   <div class="g-m-6 g-l-4">.g-m-6 .g-l-4</div>
// </div>
//
// Styleguide Utilities.Grid.SampleLayouts.ComplexMultiRowLayout
//
// Weight: 4


@include build-grid();

.grid {
  display: grid;
  grid-template-rows: auto;

  > * {
    grid-area: span 1 / span $grid-columns;
  }

  > .padding + .padding {
    padding: $space-m;
  }
}

// Gutters
//
// You can add gutters to your grid by adding a `grid-gap` class. You can also use `grid-gap-col` for only horizontal gutters and `grid-gap-row` for only vertical gutters.
//
// .grid-gap      - Add gutters between all cells.
// .grid-gap-col  - Add gutters only between columns.
// .grid-gap-row  - Add gutters only between rows.
//
// Markup:
// <div class="grid grid-gap">
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
// </div>
// <hr>
// <div class="grid grid-gap-col">
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
// </div>
// <hr>
// <div class="grid grid-gap-row">
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
//   <div class="g-s-4">.g-s-4</div>
// </div>
//
// Styleguide Utilities.Grid.Gutters
//
// Weight: 2
.grid-gap {
  grid-gap: $grid-gap-row $grid-gap-col;
}

.grid-gap-col {
  grid-column-gap: $grid-gap-col;
}

.grid-gap-row {
  grid-row-gap: $grid-gap-row;
}

// Alignment
//
// There are classes available to make content alignment in cells easier.
//
// Styleguide Utilities.Grid.Alignment
//
// Weight: 3

// Column-Axis Alignment
//
// The <abbr>CSS</abbr> property `align-self` aligns a grid item inside a cell along the block (column) axis. This value applies to the grid item inside a single cell. By default, grid items will stretch to fill the entire cell. You can add `grid-self-align-*` classes to individual grid elements to align their content.
//
// .grid-self-align-start   - Aligns the grid item to be flush with the start edge of the cell (minus any padding).
// .grid-self-align-center  - Aligns the grid item in the center of the cell.
// .grid-self-align-end     - Aligns the grid item to be flush with the end edge of the cell (minus any padding).
//
// Markup:
// <div class="grid">
//   <div class="g-s-4 grid-self-align-start">.grid-self-align-start</div>
//   <div class="g-s-4 grid-self-align-center">.grid-self-align-center</div>
//   <div class="g-s-4 grid-self-align-end">.grid-self-align-end</div>
// </div>
//
// Styleguide Utilities.Grid.Alignment.ColumnAxis
//
// Weight: 1
.grid-self-align-start {
  align-self: start;
}

.grid-self-align-center {
  align-self: center;
}

.grid-self-align-end {
  align-self: end;
}

.grid-self-align-stretch {
  align-self: stretch;
}

// Row-Axis Alignment
//
// The <abbr>CSS</abbr> property `justify-self` aligns a grid item inside a cell along the inline (row) axis. This value applies to a grid item inside a single cell. By default, grid items will stretch to fill the entire cell. You can add `grid-self-justify-*` classes to individual grid elements to align their content.
//
// .grid-self-justify-start   - Aligns the grid item to be flush with the start edge of the cell (minus any padding).
// .grid-self-justify-center  - Aligns the grid item in the center of the cell.
// .grid-self-justify-end     - Aligns the grid item to be flush with the end edge of the cell (minus any padding).
//
// Markup:
// <div class="grid">
//   <div class="g-s-4 grid-self-justify-start">.grid-self-justify-start</div>
//   <div class="g-s-4 grid-self-justify-center">.grid-self-justify-center</div>
//   <div class="g-s-4 grid-self-justify-end">.grid-self-justify-end</div>
// </div>
//
// Styleguide Utilities.Grid.Alignment.RowAxis
//
// Weight: 2
.grid-self-justify-start {
  justify-self: start;
}

.grid-self-justify-center {
  justify-self: center;
}

.grid-self-justify-end {
  justify-self: end;
}

.grid-self-justify-stretch {
  justify-self: stretch;
}