/*
 * [mhc_related] cards — measured from the "You May Also Like…" Divi blog grid (1440px): 3 columns
 * of 356px with 66px gaps (5.5% of the 1200px row), white card, 20px radius, the preset1 shadow,
 * 19px padding, 30px below; title DM Serif 18px/1.35 #333; excerpt Quattrocento 14px/1.7 #666.
 * Divi's grid goes to 2 columns at ≤980px and 1 column at ≤767px; so does this.
 */
.mhc-related {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 5.5%;
	align-items: start;
}
.mhc-related .mhc-related-card {
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 16px 96px -24px rgba(0, 0, 0, 0.3);
	padding: 19px;
	margin-bottom: 30px;
}
.et_pb_text .mhc-related .mhc-related-title {
	font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.35;
	color: #333333;
	margin: 0;
	padding: 0 0 10px;
}
.et_pb_text .mhc-related .mhc-related-title a {
	color: inherit;
	text-decoration: none;
}
.et_pb_text .mhc-related .mhc-related-excerpt {
	font-family: 'Quattrocento', Georgia, 'Times New Roman', serif;
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
	margin: 0;
	padding: 0;
}
/* Divi's own blog-grid spacing below each card (percent of the column width) and the smaller
 * phone title — read from its stylesheet: .size-1of2 → 16.21%, .size-1of1 → 11.5%, ≤479px → 16px. */
@media (max-width: 980px) {
	.mhc-related { grid-template-columns: repeat(2, 1fr); }
	.mhc-related .mhc-related-card { margin-bottom: 16.21%; }
}
@media (max-width: 767px) {
	.mhc-related { grid-template-columns: 1fr; }
	.mhc-related .mhc-related-card { margin-bottom: 11.5%; }
}
@media (max-width: 479px) {
	.et_pb_text .mhc-related .mhc-related-title { font-size: 16px; }
}