@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 3
   Tutorial Case
   
   Style Sheet for Grids used in the Pandaisia Chocolates website
   Author: 
   Date:   
   
   Filename: pc_grids.css

*/
body {
   display: grid;
   grid-template-columns: 2fr 1f;
   grid-template-areas: "header   header" "intro    faq" "articles faq" "footer   footer";
   grid-column-gap: 15px;
}

body>header {
   grid-row: 1;
   grid-column: 1/-1;
}


body>article {
   grid-area: intro;
}

body>aside {
   grid-area: faq;
}

body>section {
   grid-area: articles;
}

body>footer {
   grid-area: footer;
}

section {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}

section>h1,
h2 {
   grid-area: 1/1/2/3;
}