.grid-sizer,
.grid-item { width: 32.5%; }
.gutter {width:1.25%}

.masonry {padding:0 1.5em}
.masonry .container {
	display: block;
	position:relative;
	margin:0 auto;
	padding:0 0 calc(5vw + 4em);
}
.masonry .grid-item {
	float:left;
	margin-bottom:1.25%;
	box-shadow: 1px 1px 12px rgba(0,0,0,.25);
}


.masonry article .img{
	display: block;
	height:17em;
	width:100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;}
	
.masonry article .content{
	display: block;
	text-align: left;
	padding:2.5em 2em;
	border-top:none;
}
.masonry article .date, .masonry article a {
	font-size:.8rem;
	color:#9B9B9B;
	letter-spacing: 0;
	text-transform: uppercase;}
.masonry article hgroup {margin-bottom:1.5em;}
.masonry article hgroup h2 {
	font-size: 1.25rem;
	margin-bottom: 0;}
.masonry article hgroup h3 {
	font-size: .925rem;
	margin-top: .5em;
	font-weight: 600;}
.masonry article p {
	margin-bottom: 1em;
	font-size: .92rem;
	line-height: 1.6;}



	@media only screen and (max-width: 64rem) {
		.grid-sizer,
		.grid-item { width: 49.375%; }
		.gutter {width:1.25%}
		
	}
	@media only screen and (max-width: 40rem) {
		.grid-sizer,
		.grid-item { width: 100%; }
		.masonry .grid-item {margin-bottom:2.5%}
		.gutter {width:0}
	}