.vrpl-related {
	margin: clamp(4.5rem, 8vw, 7.5rem) 0 3.25rem;
	clear: both;
}

/* Increased specificity so theme heading rules do not enlarge this text. */
body .vrpl-related .vrpl-related__heading {
	margin: 0 0 0.6rem !important;
	padding: 0 !important;
	font-family: 'Strait', sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: normal !important;
	color: #333333 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.vrpl-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-right: 1px solid rgba(0, 0, 0, 0.14);
}

.vrpl-related__item {
	min-width: 0;
	margin: 0;
	padding: 0 0.7rem 1rem;
	border-left: 1px solid rgba(0, 0, 0, 0.14);
}

.vrpl-related__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.vrpl-related__link:visited,
.vrpl-related__link:hover,
.vrpl-related__link:focus {
	color: inherit !important;
	text-decoration: none !important;
}

.vrpl-related__link .vrpl-related__title,
.vrpl-related__link:hover .vrpl-related__title,
.vrpl-related__link:focus .vrpl-related__title {
	text-decoration: none !important;
}

.vrpl-related__image-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f0f0f0;
}

.vrpl-related__image,
.vrpl-related__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 180ms ease, opacity 180ms ease;
}

.vrpl-related__placeholder {
	background: linear-gradient(135deg, #ededed 0%, #f7f7f7 50%, #e8e8e8 100%);
}

.vrpl-related__link:hover .vrpl-related__image,
.vrpl-related__link:focus-visible .vrpl-related__image {
	transform: scale(1.015);
	opacity: 0.94;
}

body .vrpl-related .vrpl-related__title {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 0.45rem;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: normal !important;
	color: #333333 !important;
	text-align: center;
	word-break: keep-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

@media (max-width: 720px) {
	.vrpl-related {
		margin-top: 4.5rem;
	}

	.vrpl-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 1.35rem;
	}

	.vrpl-related__item {
		padding-right: 0.55rem;
	}

	body .vrpl-related .vrpl-related__title {
		font-size: 13px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vrpl-related__image {
		transition: none;
	}
}