.blog-inner {
	width:						100%;
	box-sizing:					border-box;
}

@media (min-width:970px) {
	.blog-inner {
		padding:				0 0 0 200px;
		max-width:				var(--medium-content-width);
	}
}

.blog-inner h3.new-header {
	font-size:				21px;
	line-height:			29px;
	letter-spacing:			-.25px;
	margin:					10px 0 5px;
}

.blog-inner h3.old-header,
.blog-inner h2.new-header {
	font-size: 				29px;
	line-height: 			37px;
	margin-top:				10px;
	margin-bottom:			10px;
	font-weight: 			600;
	letter-spacing:			-.5px;
}

.blog-layout {
	width:						100%;
	padding: 					0 var(--g2);
	box-sizing: 				border-box;
}

.blog-article-wrap {
    width:					100%;
	display: 				grid;
	grid-column-gap:		30px;
	grid-row-gap:			30px;
	grid-template-columns: 	repeat(auto-fill, 320px);
	max-width: 				1020px;
}

.blog-article-wrap.centered {
	margin: 				0 auto;
	justify-content: 		space-evenly;
}

.blog-article-cnt-1 {
	max-width: 				280px;
}

.blog-article-cnt-2 {
	max-width: 				670px;
}

.blog-article-layout {
	text-align:				center;
	color:					inherit;
	padding: 				250px 20px 100px;
	position: 				relative;
	border:					2px solid var(--grey);
	background:				var(--grey-light);
	transition: 			background .15s linear;
	box-sizing:				border-box;
	border-radius:			8px;
	overflow:				hidden;
}

.blog-article-layout-no-img {
	padding-top:			20px;
}

.blog-article-layout:hover {
	color:					inherit;
	text-decoration:		none;
	background:				var(--grey);
}

.blog-article-layout .button-text {
	position: 				absolute;
	bottom: 				20px;
	left: 					20px;
	width:					280px;
}

.blog-article-layout:hover .button-text {
	background:				var(--blue-light);
	border-color:			var(--blue-light);
	color:					#fff;
}

.blog-article-layout:hover .button-text:after {
	border-color:			#fff;
}

.blog-article-layout h2 {
	color:					var(--blue);
	transition: 			color .15s linear;
}

.blog-article-layout:hover h2 {
	color:					var(--orange);
}

.blog-article-img {
	position: 				absolute;
	top: 					0;
	left: 					50%;
	transform:				translateX(-50%);
	background-size:		cover;
	background-position:	center center;
	width:					100%;
	height:					240px;
	transition: 			width .15s linear;
}

.blog-article-layout:hover .blog-article-img {
	width:					calc(100% + var(--g2));
}