@charset "UTF-8";

//
// Blastila
//
// A complext three column layout with a centered max width header a left
// sidebar and a mini two column with header content area.
//
// .layout-blastila--right  - Right sidebar variant
//
// Markup: ../../../../../templates/layout/grid/three-column/blastila/blastila.twig
//
// Style guide: Layout.Grid.3Column.Blastila
//
.layout-blastila {

  > header {
    @include centered-column;
  }

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

    // Turn on the grid on screens bigger than sm
    @include grid-media('sm') {
      @include display-grid;
    }

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "sidebar head head"
    "sidebar A B";

    > aside {
      grid-area: sidebar;
    }

    > section {
      grid-area: head;
    }

    :nth-child(3) {
      grid-area: A;
    }

    :nth-child(4) {
      grid-area: B;
    }
  }
}
