.related-posts {
	margin: 1.5em 0 0.5em;
}
.related-posts-title {
	// margin-top: 0;
	margin-bottom: 1.75em;
	font-size: 24px;
	line-height: 1.5em;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}
.related-post-date,
.related-post-categories {
	padding: 0;
	margin: 0;
	position: relative;
	z-index: 3;
	list-style: none;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.related-post-image {
	margin-bottom: em(20, 22);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 0 0 rgba(#000, 0.3);	
	transition: box-shadow 0.3s, transform 0.3s;

	img {
		width: 100%;
	}
}
.related-post-title {
	margin: 0 0 em(10, 24);
	font-size: em(24, 22);
	line-height: em(26, 24);
	letter-spacing: -0.01em;

	a {
		color: #16171e;
	}
}
.related-post {
	position: relative;
	margin-bottom: em(30);

	.liquid-overlay-link {
		z-index: 2;
	}
	&:hover {
		
		.related-post-image {
			transform: translateY(-2px);
			box-shadow: 0 5px 30px rgba(#000, 0.2);
		}
	}
}
.related-post-alt {
	color: #fff;
	padding-bottom: 70%;
	overflow: hidden;

	a {
		color: #fff;
	}
	.related-post-image,
	.related-post-header {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.related-post-image {
		width: 100%;
		height: 100%;
		margin: 0;

		&:after {
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			background: linear-gradient(to top, #141622 0%, transparent 100%);
		}
		img {
			visibility: hidden;
		}
	}
	.related-post-header {
		width: 100%;
		padding: 0 30px 22px;
		z-index: 2;
	}

	&:hover {

		.related-post-image {
			transform: none;
		}
	}
}