Почему не работает grid в media

body{ 
  display: grid; 
  grid-template-areas: 
   'header header header' 
   'article Nav ads' 
  'footer footer footer'; 
  grid-template-rows: 100px 100px 100px; 
  grid-template-columns: repeat(3, 256px); 
  grid-gap: 10px; 
} 
 
#pageHeader{ 
  grid-area: header; 
  background-color: gold;  
   
} 
#mainArticle{ 
   grid-area: article; 
   background-color: gold;  
} 
#mainNav{ 
  grid-area: Nav; 
   background-color: gold;  
 
} 
#siteAds{ 
  grid-area: ads; 
   background-color: gold;  
     
} 
#pageFooter{ 
  grid-area: footer; 
   background-color: gold;  
    
} 
  @media all and (max-width: 575px){ 
  body { 
  grid-template-areas: 
    'header' 
    'article' 
    'ads' 
    'nav' 
    'footer'; 
    grid-template-rows: 80px 1fr 70px 1fr 70px; 
    grid-template-columns: 1fr; 
  } 
};

<header id=pageHeader> 
 header 
</header> 
<article id=mainArticle> 
article 
</article> 
<nav id=mainNav> 
nav 
</nav> 
<div id=siteAds> 
Ads 
</div> 
<footer id=pageFooter> 
footer 
</footer>