<main>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div class="heading">5
			<h1>CSS Grid Layout</h1>
			<h2>demo <span class="demo-number">6</span></h2>
	</div>
	<div class="intro">6
		<p>Using the `repeat()` function</p>
   </div>
	<div>7
		<p><a href="https://codepen.io/collection/XRRJGq">View CSS Grid Collection</a></p>
	</div>
	<div>8</div>
	<div>9</div>
</main>

main {
	display: grid;
	height: 100vh;
	// one column layout by default for small screens
	grid-template-columns: 1fr;
	grid-template-rows: minmax(1fr, 30ch);
	
	// when wider than my small breakpoint, grow into multi-column layout
	@include bp(small) {
		// use repeat(# of times, measurement) instead of declaring same value X times
		// replaces grid-template-columns: 1fr 1fr 1fr 1fr
		grid-template-columns: repeat(4, 1fr);
	}
}

// override the default grid-template-columns and rows
@include bp(small) {
	.heading {
		grid-row: span 3;
	}

	.intro {
		grid-column: span 3;
		grid-row: span 2;
	}
}


// Styles for fun
// -------------------------------------------------

@import 'https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400';

$color-1: rgb(119, 156, 7);
$color-2: adjust-hue($color-1, 120%);
// Amount of steps to iterate through color mix
$steps: 9;

// Mix colors to go from $color-1 ro @color-2 with 9 total steps
@for $i from 0 to $steps {
	div:nth-of-type(#{$i + 1}) {
		background: mix($color-1, $color-2, percentage($i / ($steps - 1)));
	}
}

body {
	background: #424242;
	color: #fff;
	font-family: Comfortaa, sans-serif;
	font-weight: 300;
	letter-spacing: .03rem;
	line-height: 1;
	margin: 0 auto;	
}

h1 {
	font-size: 4rem;
	font-weight: 700;
	margin: 0;
}

div {
	color: #fff;
	padding: calc(0.85rem + 1vw);
}

h2 {
	font-size: 2.0rem;
	display: inline-block;
	font-weight: 300;
	line-height: 1;
	padding: 0;
	margin: 0;
}

.demo-number {
	font-family: 'Bungee Shade', cursive;
	font-size: 3.5rem;
}

a {
	color: hsl(317, 72%, 97%);
}
	
p {
	font-size: 1rem;
	line-height: 1.5;
}