html,body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.hero {
  padding: 0 0 150px 0;
  background: #FFDC00;
}

.hero p {
  	display: block;
	max-width: 900px;
  	margin: 0 auto;
  padding: 20px 60px;
  	text-align: center;
  	font-size: 120%;
  	font-weight: bold;
}
h1 {
  max-width: 900px;
  text-align: center;
  margin: 100px auto 10px auto;
}

h2 {
  font-size: 18px;
  margin: 0 0 8px 0;
}

.wrapper {
  	max-width: 900px;
  	margin: -75px auto 35px auto;
    display: grid;
    grid-gap: 10px;
		grid-template-columns: 33% 33% 33%;
		color: #444;
	}

	.box {
		background-color: #FFF;
		color: #000;
		border-radius: 5px;
		padding: 20px;
		font-size: 90%;

	}

	.a {
		
	}
	.b {
		
	}
	.c {
		
	}
	.d {
		
	}
	.e {
		
	}
	.f {
	
	}

@media only screen and (max-width: 600px)  {
	.wrapper {
        grid-gap: 0;
		grid-template-columns: auto;
	}
}