sass-site/source/assets/css/layout/_holy-grail.scss

.sl-l-holy-grail {

  &,
  &__body {
    display: flex;
    flex-direction: column;
  }

  height: 100%;

  &__header,
  &__footer { flex: none; }

  &__body {
    flex: 1 0 auto;

    @include sl-breakpoint--medium {
      flex-direction: row;
      margin: {
        right: -2rem;
        left: -2rem;
      };
    }
  }

  &__main,
  &__navigation,
  &__complementary {

    @include sl-breakpoint--medium {
      padding: {
        right: sl-px-to-rem(32px);
        left: sl-px-to-rem(32px);
      };
    }
  }

  &__main {

    @include sl-breakpoint--medium { flex: 1; }
  }

  &__navigation {
    order: -1;

    @include sl-breakpoint--medium { flex: 0 0 sl-px-to-rem(320px); }
  }

  &__complementary {

    @include sl-breakpoint--medium { flex: 0 0 sl-px-to-rem(480px); }
  }
}