/* Boiler plate code below */
html, body {
	margin:0;
  padding:0;
}

* {
  box-sizing: border-box;
  font-family: sans-serif; 
}

/* Makes images behave normally as a box */
img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* -------------------------- */

.container {
	display: grid;
	grid-template-columns: repeat(36, [col-start] 1fr);
}

/* styling for section block */
.sectioncontainer {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 36;
	padding: 1em;
	gap: 1em;
}

.sectionone {
	background-color: lightblue;
}

.sectiontwo {
	background-color: white;
}


/* Individual item styling inside a section */
.contentitem {
	display: flex;
	flex-direction: column;
	justify-content: center;
	grid-column: 1 / 37;
	background-color: seagreen;
	border-radius: 10px;
}

.contentone {
}

.contenttwo {
}


header {
	grid-column: span 36;
	display: flex;
	background-color: gray;
	height: 15vh;
}

main {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 36;
	background-color: white;
}

footer {
	grid-column: span 36;
	background-color: navy;
}

@media (min-width: 900px) {
	.contentone {
		grid-column: span 18;
	}
	.contenttwo {
		grid-column: 19 / 37
	}
	}



@media (min-width: 1400px) {
.contentone {
	grid-column: span 24;
}

.contenttwo {
	grid-column: span 12;
}
}