@charset "UTF-8";

//
// Battleship
//
// A three column cell with header and footer. This layout has a single column
// that is centered on the page with a max width determined by the breakpoints.
//
// Markup: ../../../../../templates/layout/grid/three-column/battleship/battleship.twig
//
// Style guide: Layout.Grid.3Column.Battleship
//
.layout-battleship {
  > div {
    @include centered-column;
    @include responsive-grid-columns($su-responsive-columns-three);

    // Collapse to rows on IE 11.
    @include grid-media-only('xs') {
      display: block;
    }

    :first-child {
      @include grid-item-spans(1, span 2);
      -ms-grid-row: 1;
      -ms-grid-column: 1;
    }

    :nth-child(2) {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
    }

    :nth-child(3) {
      -ms-grid-row: 2;
      -ms-grid-column: 1;
    }

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

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

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

    :nth-child(7) {
      -ms-grid-row: 3;
      -ms-grid-column: 2;
    }

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