@charset "UTF-8";

//
// Thions
//
// A complext three column layout.
//
// .layout-thions--bottom - A bottom heavy variant
//
// Markup: ../../../../../templates/layout/grid/three-column/thions/thions.twig
//
// Style guide: Layout.Grid.3Column.Thions
//
.layout-thions {
  > div {
    @include centered-column;
    @include responsive-grid-gap;

    // Enable grid after sm sizes.
    @include grid-media('sm') {
      @include display-grid;
      @include grid-columns;
    }

    > div:nth-of-type(1) {
      @include grid-item-spans(1, span 6, 1, span 1);
    }

    > div:nth-of-type(2) {
      @include grid-item-spans(7, span 6, 1, span 1);
    }

    > div:nth-of-type(3) {
      @include grid-item-spans(1, span 4, 2, span 1);
    }

    > div:nth-of-type(4) {
      @include grid-item-spans(5, span 4, 2, span 1);
    }

    > div:nth-of-type(5) {
      @include grid-item-spans(9, span 4, 2, span 1);
    }

  }
}
