@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: Yulia Bekirova
   Date: 03.01.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;
}

/* Grid Placement */

body > header  { grid-area: header; }
body > article { grid-area: intro; }
body > section { grid-area: articles; }
body > aside   { grid-area: faq; }
body > footer  { grid-area: footer; }

/* Grid Styles for Nested Grid */

section {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}

/* Place section heading across both columns */

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

/* Outlines (temporary) */

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

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