@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: Tahira Slayman
   Date:   2-27-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-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;
}
/* 
body > * {
  outline: 2px dashed red;
}

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