@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: Mohammad Z Taieeb
   Date:   02/23/2026
   
   Filename: pc_grids.css

*/


/* Grid Styles for Page Body */
body {
   display: grid;
   grid-template-columns: 3fr 1fr;
   grid-template-areas:
      "header header"
      "article aside"
      "section aside"
      "footer footer";
   column-gap: 20px;
}

body > header {
   grid-area: header;
}

body > article {
   grid-area: article;
}

body > section {
   grid-area: section;
}

body > aside {
   grid-area: aside;
}

body > footer {
   grid-area: footer;
}


/* Grid Styles for Nested Grid */
section {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 20px;
}

section > h2 {
   grid-column: 1 / -1;
}