/**
 * Testimonials grid.
 *
 * Only the grid, which the design drove from its `narrow` flag, plus the card
 * shell and its hover, which every card repeats. Everything else keeps the
 * design's inline styling. No box-sizing reset -- the design has none.
 *
 * Narrow first; the media query at the end is the design's wide branch.
 */

.rcrv__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: clamp(16px, 2vw, 24px);
}

.rcrv__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
	border-radius: 16px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #e8e8ed;
	transition: transform 200ms cubic-bezier(0.22, 0.8, 0.28, 1), box-shadow 200ms ease;
}

.rcrv__card:hover {
	transform: translateY(-4px);
	box-shadow:
		inset 0 0 0 1px #c7d2fe,
		0 18px 36px -16px rgba(15, 17, 23, 0.16);
}

@media (prefers-reduced-motion: reduce) {

	.rcrv__card {
		transition: none;
	}

	.rcrv__card:hover {
		transform: none;
	}
}

/* The design hides these line breaks on small screens. */
@media (max-width: 900px) {

	.rcrv .rc-br {
		display: none;
	}
}

/* The switch ---------------------------------------------------------------
 *
 * One breakpoint, at the design's own `narrow = w < 860`.
 */

@media (min-width: 860px) {

	.rcrv__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}