body {
  display: grid;
  grid-template-columns: [left-gutter] 5% [content] 90% [right-gutter] 5%;
  grid-template-rows: [header] 10% [body] auto [footer] 30%;
  grid-column-gap: 0;
  @include breakpoint(m) {
   grid-template-columns: [left-gutter] 1fr [content] 4fr [right-gutter] 1fr;
   grid-column-gap: 1em;
  }
  @include breakpoint(l) {
    grid-template-columns: [left-gutter] 1fr [content] 2fr [right-gutter] 1fr;
    grid-column-gap: 1em;
  }
}

.header {
  grid-row: header;
  grid-column: left-gutter / 4;
  display: grid;
  grid-template-columns: [header-left-gutter] 5% [title] 90% [header-right-gutter] 5%;
  grid-template-rows: [title] 7em [menu] 6em;
  grid-column-gap: 0;
  @include breakpoint(s) {
    grid-template-rows: [title] 7em [menu] 3.4em;
  }
  @include breakpoint(m) {
   grid-template-columns: [header-left-gutter] 1fr [title] 4fr [header-right-gutter] 1fr;
   grid-template-rows: [title] 7em [menu] 3.4em;
   grid-column-gap: 1em;
  }
  @include breakpoint(l) {
    grid-template-columns: [header-left-gutter] 1fr [title] 2fr [header-right-gutter] 1fr;
    grid-template-rows: [title] 7em [menu] 3.4em;
    grid-column-gap: 1em;
  }
  .title {
   grid-column: title;
   grid-row: title;
  }
  .menu {
   grid-row: menu;
   grid-column: title;
  }
}

.footer {
  grid-row: footer;
  grid-column: left-gutter / 4;
  display: grid;
  grid-template-columns: [footer-left-gutter] 5% [center] 90% [footer-right-gutter] 5%;
  grid-column-gap: 0;
  @include breakpoint(m) {
   grid-template-columns: [footer-left-gutter] 1fr [center] 4fr [footer-right-gutter] 1fr;
   grid-column-gap: 1em;
  }
  @include breakpoint(l) {
    grid-template-columns: [footer-left-gutter] 1fr [center] 2fr [footer-right-gutter] 1fr;
    grid-column-gap: 1em;
  }
  ul {
   grid-column: center;
  }
}

.content {
  grid-row: body;
  grid-column: content;
}

#contact {
  @include breakpoint(l) {
    display: grid;
    grid-template-columns: [pers] 1fr [prof] 1fr;
    grid-column-gap: 1em;
    .perso {
      grid-column: pers;
    }
    .prof {
      grid-column: prof;
    }
  }
}