.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); } } }