html {
  background: #f5f7f8;
  font-family: 'Roboto', sans-serif;
  padding: 20px 0;
}

body{
display: grid;
  grid-template-areas: 
    "header"
    "nav"
    "ads"
    "article"
    "footer";
  grid-template-rows: 50px 50px 50px 300px 50px;  
  grid-template-columns: 1fr;
  grid-gap: 10px;
margin: 0;
}


#pageHeader, #pageFooter, #mainArticle, #mainNav, #siteAds {
  padding: 1em;
  background: gold;
  }
#pageHeader {
  grid-area: header;
  }
#pageFooter {
  grid-area: footer;
  }
#mainArticle { 
  grid-area: article;     
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  } 
#mainArticle > .phone {
  bottom: 0;
  right: -1vw;
  font-size: 3em;
	display: flex;
	justify-content: flex-end;
	
}


/* perfil tablet */


@media (min-width: 500px) {
 body {
	
  display: grid;
  grid-template-areas: 
    "header header"
    "nav ads"
    "article article"
    "footer footer";
  grid-template-rows: 50px 50px 1fr 50px;  
  grid-template-columns: 1fr 1fr ;
  grid-gap: 10px;
    margin: 0;
  
  }  

 }


/* perfil ordenador */

	
@media (min-width: 800px) {
body { 
  display: grid;
  grid-template-areas: 
    "header header header header"
    "nav article article ads"
    "nav article article ads"
    "footer footer footer footer";
  grid-template-rows: 50px 250px 200px 50px;  
  grid-template-columns: 50px 1fr 1fr 200px ;
  grid-gap: 10px;
  margin: 0;
  }