@charset "UTF-8";

//
// Chess
//
// A complext three column layout with full width header and footer and a
// 6 cell 3 column 2 row middle.
//
// Markup: ../../../../../templates/layout/grid/three-column/chess/chess.twig
//
// Style guide: Layout.Grid.3Column.Chess
//
.layout-chess {

  > header,
  > footer {
    @include centered-column;
  }

  > section {
    @include centered-column;
    @include responsive-grid-gap;

    // Enable the grid on md and higher.
    // let everything be one column on xs and sm.
    @include grid-media-max('md') {
      @include display-grid;
      @include grid-columns(1fr 1fr);

      :nth-child(3),
      :nth-child(4) {
        -ms-grid-row: 2;
      }

      :nth-child(4) {
        -ms-grid-column: 2;
      }

      :nth-child(5),
      :nth-child(6) {
        -ms-grid-row: 3;
      }

      :nth-child(6) {
        -ms-grid-column: 2;
      }

    }

    @include grid-media('lg') {
      @include display-grid;
      @include grid-columns(1fr 1fr 1fr);

      :nth-child(4),
      :nth-child(5),
      :nth-child(6) {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
      }

      :nth-child(5) {
        -ms-grid-column: 2;
      }

      :nth-child(6) {
        -ms-grid-column: 3;
      }
    }

  }

}
