body {
  margin: 1rem auto;
}

.header {grid-area: header;}
.main {grid-area: main;}
.content {grid-area: content;}
.sidebar {grid-area: sidebar;}
.aside {grid-area: aside}
.footer {grid-area: footer;}


@media only screen and (orientation: portrait;)
{
  .wrapper {
    display: grid;
    grid-gap: 20rem;
    justify-content: center;
   /* align-items: center;*/
    grid-template-areas:
     "header"
     "main"
     "content"
     "sidebar"
     "aside"
     "footer"
  }
  .box:after  {
    clear:both;
    content:".";
    display:block;
    height:0;
    line-height:0;
    overflow: hidden;
    visibility:hidden;
  }
 .gridItem {
    display: grid;
    max-width: 59.75rem;
    grid-gap: 1rem;
    justify-content: center;
    grid-template-areas:
      "itemHeader" 
      "itemPhone" 
      "itemMail" 
      "itemSocial";
 }
}

@media only screen and (orientation: landscape)
{
  .wrapper {
    display: grid;
    max-width: 59.75rem;
    grid-gap: 1rem;
    grid-template-areas:
      "header  header"
      "main main"
      "content sidebar"
      "aside aside"
      "footer  footer";
  }
  .picture {
    float: left;
    margin-right: 1rem;
  }
  .button {margin-left: 4.5rem;}
  .buttonQuest {
    margin-left: 1rem;
    margin-top: 1rem;
  }
.gridItem {
    display: grid;
    max-width: 59.75rem;
    grid-gap: 0.5rem;
    grid-template-areas:
      "itemHeader itemPhone itemMail itemSocial"; 

}
.middle {text-align: center; padding: 0 0.1rem;}

  /*.imgSmall {display: block;}
  .imgBig {display: none;}  */
}