.mkb-related-card-grid {
	min-width: 0;
}

.mkb-related-card-grid__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mkb-space-5);
}

.mkb-related-card-grid--four .mkb-related-card-grid__items {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mkb-related-card {
	display: flex;
	min-width: 0;
	min-height: 250px;
	flex-direction: column;
	padding: var(--mkb-space-7);
	border: 1px solid var(--mkb-color-border);
	border-radius: var(--mkb-radius-lg);
	background: var(--mkb-color-surface);
	box-shadow: var(--mkb-shadow-sm);
	transition: transform var(--mkb-transition), border-color var(--mkb-transition), box-shadow var(--mkb-transition);
}

.mkb-related-card:hover {
	transform: translateY(-4px);
	border-color: rgba(79, 124, 103, 0.22);
	box-shadow: var(--mkb-shadow-md);
}

.mkb-related-card__label {
	display: inline-flex;
	width: max-content;
	max-width: 100%;
	padding: 0.42rem 0.72rem;
	border-radius: var(--mkb-radius-pill);
	background: var(--mkb-color-primary-soft);
	color: var(--mkb-color-primary-strong);
	font-size: var(--mkb-text-xs);
	font-weight: 650;
	line-height: 1;
}

.mkb-related-card__title {
	display: -webkit-box;
	margin: var(--mkb-space-5) 0 var(--mkb-space-3);
	overflow: hidden;
	color: var(--mkb-color-ink);
	font-size: var(--mkb-text-xl);
	line-height: 1.42;
	letter-spacing: -0.02em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.mkb-related-card__title a {
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.mkb-related-card__description {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--mkb-color-muted);
	font-size: var(--mkb-text-sm);
	line-height: 1.72;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.mkb-related-card__action {
	display: inline-flex;
	width: max-content;
	max-width: 100%;
	align-items: center;
	margin-top: auto;
	padding-top: var(--mkb-space-6);
	color: var(--mkb-color-primary-strong);
	font-weight: 650;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.mkb-related-card-grid--compact .mkb-related-card {
	min-height: 220px;
}

@media (max-width: 900px) {
	.mkb-related-card-grid__items,
	.mkb-related-card-grid--four .mkb-related-card-grid__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.mkb-related-card-grid--mobile-scroll .mkb-related-card-grid__items {
		display: grid;
		grid-auto-columns: minmax(240px, 82vw);
		grid-auto-flow: column;
		grid-template-columns: none;
		gap: var(--mkb-space-4);
		margin-inline: calc(var(--mkb-space-5) * -1);
		padding-inline: var(--mkb-space-5);
		padding-bottom: var(--mkb-space-3);
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		scrollbar-width: none;
	}

	.mkb-related-card-grid--mobile-scroll .mkb-related-card-grid__items::-webkit-scrollbar {
		display: none;
	}

	.mkb-related-card-grid--mobile-scroll .mkb-related-card {
		min-height: 230px;
		scroll-snap-align: start;
	}

	.mkb-related-card-grid:not(.mkb-related-card-grid--mobile-scroll) .mkb-related-card-grid__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mkb-space-3);
	}

	.mkb-related-card-grid:not(.mkb-related-card-grid--mobile-scroll) .mkb-related-card {
		min-height: 220px;
		padding: var(--mkb-space-5);
	}

	.mkb-related-card-grid:not(.mkb-related-card-grid--mobile-scroll) .mkb-related-card__title {
		font-size: var(--mkb-text-lg);
	}

	.mkb-related-card-grid:not(.mkb-related-card-grid--mobile-scroll) .mkb-related-card__action {
		font-size: var(--mkb-text-sm);
	}
}