@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: Kul
   Date:   2/28/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-area: header;
}

body > article {
    grid-area: intro;
}

body > aside {
    grid-area: faq;
}

body > footer {
    grid-area: footer;
}

/* Grid Styles for Nested Grid */

section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
	
section h1, section h2 {
    grid-area: 1 / 1 / 2 / 3;
}

body > section#leftColumn {
    grid-area: intro;
}

body > section#rightColumn {
    grid-area: articles;
}