/* Approximate breakpoints

Advanced

Mobile devices:  320px-600px
Tablets:  481px-768px
Laptops: 769px-1024px
Desktop: 1025px-1200px
Larger Desktop & TV: 1201px and up

Beginner

Mobile devices: 320-600px;
Tablets: 601-900px;
Desktop: 901px +;

Mobile first!*/

html {
	font-size: 16px;
	line-height: 1.4rem;
	font-family: Helvetica, cursive;
}

body {
	background: #1D573B;
}

.hero {
	padding: 1rem;
	padding-bottom: 1rem;
}

.hero h1{
	font-size: 2.5rem;
	margin: 0;
	line-height: 2rem;
	text-align: center;
	padding: 2rem;
}

h2 {
	font-size: 1.8rem;
	text-align: center;
	margin: 1rem;
	
}

section {
	padding: 1rem;
	border-radius: .5rem;
	margin-bottom: 1rem;
}

section img {
	border-radius: .5rem;
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 450px;
}

.section-even {
	background: #5C3B57;
}

.section-odd {
	background: #651F1F;

}


/* Tablets */
 @media (min-width: 601px) {

#section-1 {

}
	
.grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: .5rem;
}

section {
	margin: 0;
}

.hero {
	grid-column: 1/3;
}



}/*this ends tablet css*/


/* this begins destkop styling */
@media (min-width: 901px) {
	
body {
		max-width: 1200px;
	}

.grid-container {
	grid-template-columns: 1fr 1fr 1fr;
	}

.hero {
		grid-column: 1/4;
	}
}/*this ends deskstop css*/