/*
 * Related Posts: layout only — a CSS grid of cards. Columns, gaps, image
 * sizes and every colour come from the block's Style controls.
 */

.ne-rel {
	display: grid;
}

.ne-rel-item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ne-rel-thumb {
	display: block;
	overflow: hidden;
}

.ne-rel-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.ne-rel-item:hover .ne-rel-img {
	transform: scale(1.04);
}

/* Image beside the text. */
.ne-rel.is-list .ne-rel-item {
	flex-direction: row;
	align-items: center;
}

.ne-rel.is-list .ne-rel-thumb {
	flex: 0 0 auto;
}

.ne-rel.is-list .excerpt-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

/* Text over the image: the caption sits on the bottom of the photo. */
.ne-rel.is-overlay .ne-rel-item {
	overflow: hidden;
}

.ne-rel.is-overlay .ne-rel-item::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ne-rel.is-overlay .excerpt-wrap {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}