.sl-l-holy-grail {

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

  height: 100%;

  &__header,
  &__footer { flex: none;     }
  &__body   { flex: 1 0 auto; }

  &__navigation { order: -1; }

  @include sl-breakpoint--medium {

    &__body {
      flex-direction: row;
      margin: {
        right: -2rem;
        left:  -2rem;
      };
    }

    &__main,
    &__navigation,
    &__complementary {
      padding: {
        right: 2rem;
        left:  2rem;
      };
    }

    &__main          { flex: 1;         }
    &__navigation    { flex: 0 0 20rem; }
    &__complementary { flex: 0 0 30rem; }
  }
}