.related {
	border-top: 3px solid #000;
	position: relative;
	margin-top: 2em;
	padding-top: 2em;
	width: 100%;
}
.related::before {
	content: '';
	background: #ed2127;
	height: 3px;
	width: 10px;
	position: absolute;
	top: -3px;
	left: 0;
}

.related h2 {
	margin-top: 0;
}

.related a
{
	display: block;
	text-decoration: none;
	border-top: 1px solid #eee;
	padding: 6px 0;
}

.related img {
	display: inline-block;
	vertical-align: top;
	width: 25%;
	height: auto;
}
.related .content {
	display: inline-block;
	width: 75%;
	padding-left: 10px;
}

.related h3 {
	margin: 0;
	font-size: 1em;
}

.related p {
	display: none;
}

@media all and (min-width: 550px) and (max-width: 700px)
{
	.related p {
		display: block;
	}
}

@media all and (min-width: 800px)
{
	.related a:hover {
		background: #ddd;
		padding: 6px;
		margin: 0 -6px;
	}
	.related p {
		display: block;
	}

	.related > div > a
	{
		border-top: 0;
	}

	.related > div
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20px;
	}
}

/*@media all and (min-width: 500px) and max-width
{
	.related a {
		border: 0;
	}
	.related img {
		width: 100%;
	}

	.related h3 {
		width: 100%;
		padding: 0;
	}
	.related a,
	.related a:nth-of-type(3n+2) {
		display: inline-block;
		vertical-align: top;
		width: 33.33%;
		padding: 0 5px;
	}

	.related a:nth-of-type(3n+1) {
		padding: 0 10px 0 0;
	}

	.related a:nth-of-type(3n) {
		padding: 0 0 0 10px;
	}
}*/