@charset "utf-8";
/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Tutorial Case
   
   Style Sheet for Grids used in the Pandaisia Chocolates website
   Author: Roxanne Demorest
   Date:   03.01.2026
   
   Filename: pc_grids.css

*/


/* Grid Styles for Page Body */

body {
   display: grid;
   grid-template-columns: 2fr 1fr;  
   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;}


/* Grid Styles for Nested Grid */

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


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