@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: Fredrick Nguyen
   Date: 10/2/2025
   
   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 {
        grid-area: 1/1/2/3;
    }