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

.header {
  grid-row: header;
  grid-column: left-gutter / 4;
  display: grid;
  @include breakpoint(desktop) {
    grid-template-columns: [header-left-gutter] 1fr [title] 2fr [header-right-gutter] 1fr;
    grid-template-rows: [title] auto [menu] auto;
    grid-column-gap: 1em;
  }
  @include breakpoint(tablet) {
   grid-template-columns: [header-left-gutter] 1fr [title] 4fr [header-right-gutter] 1fr;
   grid-template-rows: [title] auto [menu] auto;
   grid-column-gap: 1em;
 }
 grid-template-columns: [header-left-gutter] 1em [title] auto [header-right-gutter] 1em;
 grid-template-rows: [title] auto [menu] auto;
 grid-column-gap: 0;
 .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;
  @include breakpoint(desktop) {
    grid-template-columns: [footer-left-gutter] 1fr [center] 2fr [footer-right-gutter] 1fr;
    grid-column-gap: 1em;
  }
  @include breakpoint(tablet) {
   grid-template-columns: [footer-left-gutter] 1fr [center] 4fr [footer-right-gutter] 1fr;
   grid-column-gap: 1em;
 }
 grid-template-columns: [footer-left-gutter] 1em [center] auto [footer-right-gutter] 1em;
 grid-column-gap: 0;
 ul {
  grid-column: center;
}
}

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

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