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

@use '../breakpoints';
@use '../functions';

@each $breakpoint, $size in breakpoints.$sl-breakpoints {
  $prefix: if(($breakpoint == 'none'), '', '#{$breakpoint}-');

  @include breakpoints.sl-breakpoint-set($breakpoint, $size) {
    .sl-l-#{$prefix}holy-grail {
      &,
      &__body {
        display: flex;
      }

      flex-direction: column;
      height: 100%;

      &__header,
      &__footer {
        flex: none;
      }

      &__body {
        flex: 1 0 auto;
        flex-direction: row;
        margin: {
          right: var(--gutter-double-negative);
          left: var(--gutter-double-negative);
        }
      }

      &__main,
      &__navigation,
      &__complementary {
        padding: {
          right: var(--gutter-double);
          left: var(--gutter-double);
        }
      }

      &__main {
        flex: 1;
      }

      &__navigation {
        flex: 0 0 functions.sl-px-to-rem(240px);
        order: -1;
      }

      &__complementary {
        order: 1;
        flex: 0 0 functions.sl-px-to-rem(480px);

        &--contents {
          flex: 0 0 functions.sl-px-to-rem(240px);
          order: -1;
        }
      }
    }
  }
}