style.css

* {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}
html, body {
	padding:0;
	margin:0;
	font-family: 'Open Sans';
}
main {
	width:100%;
	max-width:66.25em;
	margin:3em auto;
}
h3 {
	font-weight: 700;
}
article {
	float:left;
	width:65%;
	font-weight: 400;
	padding:1.25em 2.25em;
	background: #F5F5F5;
}
aside {
	float:left;
	width:35%;
	padding:2.25em 1.25em;
	background: #CCC;
}

@media (max-width: 55em) {
	article {
		width:70%;
	}
	aside {
		width:30%;
	}
}

@media (max-width: 51em) {
	article {
		width:75%;
	}
	aside {
		width:25%;
	}
}

@media (max-width: 47.75em) { 
	article {
		float:none;
		padding:4.5em;
		width:100%;
	}
	aside {
		float:none;
		padding:4.5em;
		width:100%;
	}
}

@media (max-width: 40.5em) {
	article {
		padding:2.25em 1.25em;
	}
	aside {
		padding:2.25em 1.25em;
	}
}