@charset "utf-8";

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

   Author: Kevin Viren
   Date:   10/2/2023
   
   Filename: code3-2_layout.css

*/


header, footer, aside, article, a {
	padding: 10px;
	outline-style: dashed;
	outline-width: 3px;
	outline-color: gray;
}

body {
	max-width: 1024px;
	min-width: 640px;
	width: 90%;
	margin: 30px auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 50px 30px 1fr 1fr 100px;
	grid-gap: 15px 15px;
}

a {
	display: block;
}

header {
	grid-column: 1/-1;
}

article#intro {
	grid-row: span 2;
	grid-column: span 2;
}

article#main {
	grid-row: span 2;
	grid-column: span 3;
}

footer {
	grid-column: span 2;
}