@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: Allyson Meza
   Date:   02/26/26
   
   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);   
}

div.row{
   clear: both;
}

div.row:after{
   clear: both;
   content: "";
   display: table;
}

div [class^="col-"]{
   float: left;
}

div.col-1-1{width: 100%;}
div.col-1-2{width: 50%;}
div.col-1-3{width: 100%;}
div.col-2-3{width: 66.67%;}
div.col-1-4{width: 25%;}
div.col-3-4{width: 75%;}


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

/* Grid Rows Styles */




/* Grid Columns Styles */




/* Grid Outline Styles */