/* Diagram Showcase — Figma 1346:583. Intro mirrors dimension-cards (display H2 80/77). */

.rw-block-diagram-showcase { color: var(--rw-color-primary-green); }

.rw-block-diagram-showcase .intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rw-space-md);
	margin: 0 auto 5.5rem; /* Figma-exact 88px intro → diagram */
	max-width: 70.6875rem;
	text-align: center;
}
.rw-block-diagram-showcase h2 {
	font-size: var(--rw-display-size);
	line-height: var(--rw-h2-line); /* Figma 80 / 77 */
	letter-spacing: var(--rw-display-tracking);
	color: var(--rw-color-primary-green);
}
.rw-block-diagram-showcase .body {
	margin: var(--rw-space-xs) 0 0; /* 24 + 8 = Figma 32px */
	max-width: 37.125rem; /* Figma-exact 594px */
	color: var(--rw-color-grey-01);
}

.rw-block-diagram-showcase .diagram,
.rw-block-diagram-showcase .diagram img {
	display: block;
	width: 100%;
	height: auto;
}
.rw-block-diagram-showcase .diagram img { border-radius: var(--rw-radius-lg); }

@media (max-width: 767px) {
	.rw-block-diagram-showcase .intro { margin-bottom: var(--rw-space-xl); gap: var(--rw-space-sm); }
	.rw-block-diagram-showcase h2 { line-height: var(--rw-display-line); }
	.rw-block-diagram-showcase .diagram img { max-width: 30rem; margin-inline: auto; }
}