.layout-default {
  @supports (display: grid) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: min-content;
    grid-template-areas:
      "header header header header header header header header header header header header"
      "main main main main main main main main main main main main"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
  }
}

.layout-side-header {
  @supports (display: grid) {
    display: grid;
    grid-template-columns: 100px repeat(11, 1fr);
    grid-template-rows: min-content;
    grid-template-areas:
      "header main main main main main main main main main main main"
      "header main main main main main main main main main main main"
      "header footer footer footer footer footer footer footer footer footer footer footer";

    @include mobile-only {
      grid-template-areas:
        "header header header header header header header header header header header header"
        "main main main main main main main main main main main main"
        "footer footer footer footer footer footer footer footer footer footer footer footer";
    }
  }

  &--reverse {
    @supports (display: grid) {
      display: grid;
      grid-template-columns: repeat(11, 1fr) 100px;
      grid-template-rows: min-content;
      grid-template-areas:
        "main main main main main main main main main main main header"
        "main main main main main main main main main main main header"
        "footer footer footer footer footer footer footer footer footer footer footer header";

      @include mobile-only {
        grid-template-areas:
          "header header header header header header header header header header header header"
          "main main main main main main main main main main main main"
          "footer footer footer footer footer footer footer footer footer footer footer footer";
      }
    }
  }
}

.layout-side-header,
.layout-side-header--reverse {
  .container {
    @include tablet-landscape-up {
      width: 800px;
      max-width: 900px;
      padding: 0 #{$grid-space-landscape-tablet};
    }
    @include desktop-up {
      width: 1100px;
      max-width: 1200px;
      padding: 0 #{$grid-space-desktop};
    }
    @include big-desktop-up {
      width: 1600px;
      max-width: 1800px;
      padding: 0 #{$grid-space-big-desktop};
    }
  }
}