@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: Masooda Baiza
   Date:  2-Mar-2026 
   
   Filename: pc_grids.css

*/


/* Grid Rows Styles */

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;
}
/* Assign Grid Areas */
body > article { grid-area: intro; }
body > aside { grid-area: faq; }
body > section { grid-area: articles; }
body > footer { grid-area: footer; }

/* Grid Columns Styles */
/* Grid Styles for Nested Grid */

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




/* Grid Outline Styles */


body > * {
    outline: 2px dashed red;
}
section > * {
    outline: 2px dashed blue;
}