@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Coding Challenge 4

   Author: Kevin Viren
   Date:   10/2/2023
   
   Filename: debug3-4.css

*/

/* Page Body Styles */
body {
   width: 90%;
   min-width: 600px;
   max-width: 1024px;
   margin: 10px auto;
   
   display: grid;
   grid-template-columns: 200px auto 200px; 
   grid-template-areas: "header header  header"
                        "link   link    link" 
						"nav    main    side"
                        "nav    coupons side"
                        "footer footer  footer";
   grid-gap: 10px 25px;
}

/* Grid Areas */
header {grid-area: header;}
nav.horizontal {grid-area: link;}
nav.vertical {grid-area: nav;}
article {grid-area: main;}
section {grid-area: coupons;}
aside {grid-area: side;}
footer {grid-area: footer;}

/* Image Styles */
header img {
   display: block;
   width: 100%;
}

/* Horizontal Navigation List Styles */
nav.horizontal ul {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
}
nav.horizontal ul li {
   display: block;
   text-align: center;
}

/* Coupon Section Styles */
section {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 20px;
}

section div {
   outline: 4px dashed gray;
   position: relative;
}

section div p:last-of-type {
   position: absolute;
   bottom: 1px;
   right: 5px;
}