h2 {
	color: black;
	text-align: center;
	grid-area: h2
}

main {
	margin: 10px;
}

.container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto, 100px, minmax(100px, auto);
  grid-gap: 10px;
  grid-template-areas:
      "header header header header header"
      "nav nav nav nav nav"
			"h2 h2 h2 h2 h2"
      "main main main main main"
      "main main main main main"
      "footer footer footer footer footer";

}

#article {
	font-size: 16px;
	text-align: center;
	padding: 0 0 20px 0;
}

#philphoto {
	float: left;
	width: 300px;
	height: 400px;
	padding: 0 20px 0 0;
}

@media screen and (min-width: 768px) {
	.container {
	    grid-template-areas:
	        "header header header header header"
	        "nav nav nav nav nav"
	        "main main main main main"
	        "main main main main main"
	        "footer footer footer footer footer";
	}
}

@media screen and (max-width: 768px) {
	#philphoto {
		width: 100%;
		height: auto;
		padding: 0 0 40px 0;
	}
}

@media screen and (max-width: 430px) {
	#philphoto {
		width: 100%;
		height: auto;
		padding: 0 0 40px 0;
	}
}