.grid {
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
	transition: all 0.2s;
}
.grid:after {
	content: "";
	display: table;
	clear: both;
	transition: all 0.2s;
}

.grid--sizer,
.grid--item,
.grid--item__featured {
	width: 50%;
	padding: 0 0;
	float: left;
	transition: all 0.2s;
}





@media screen and (min-width: 768px) {
.grid--sizer,
.grid--item {
	width: 50%;
	padding: 0 0;
	float: left;
	transition: all 0.2s;
}

.grid--item__featured {
	width: 66.6666666667%;
	padding: 0 0;
	float: left;
	transition: all 0.2s;
}

}


@media screen and (min-width: 960px) {
.grid--sizer,
.grid--item {
	width: 50%;
	padding: 0 0;
	float: left;
	cursor: pointer;
	transition: all 0.2s;
	transition: all 0.2s;
}

.grid--item:hover{
	transform: scale(1.05);
	z-index: 99;
}

.grid--item:hover .grid--card {
	box-shadow: 0px 18px 18px -9px rgba(0, 0, 0, 0.7);
}

.grid--item__featured {
	width: 50%;
	padding: 0 0;
	float: left;
	transition: all 0.2s;
}
}





@media screen and (max-width: 680px) {
	.grid--sizer,
	.grid--item {
		width: 100%;
		padding: 0 0;
		float: left;
	}
	
	.grid--item__featured {
		width: 100%;
		padding: 0 0;
		float: left;
	}
	
}





.grid--item {
	padding: 13px;
}

.grid--item img {
	display: block;
	width: 100%;
	transition: all 0.2s;
}

.grid--card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	transition: all 0.2s;
}

.grid--title {
	padding: 1em;
}
.grid--title h3 {
	margin: 0;
}
.grid--title p {
	margin: 6px 0 8px 0;
}