/* page-module.feature — a single feature spotlight (HTML/CSS/JS element).
   Rendered by `feature_single_module` and (multiplied) by `feature_group_module`. */

page-module.feature {
	.feature-name + code-snippet {
		margin-top: var(--above-block);
	}

	code-snippet {
		/*max-width: 94ch;*/
	}

	text-content {
		margin-top: var(--below-block);
	}

	.optional-context {
		margin-top: 1em;
		border-top: 1px solid var(--stroke-auxiliary);
		padding-top: 1em;
	}

	nav { /* should this be a nav? */
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 1em;
		gap: 0.5em;
		a {
			text-decoration: underline;
			color: inherit;
		}
	}
}

page-module.feature .feature-name {
	margin-top: 0;
}


/* feature-card embed sizing — codepen inside a feature spotlight.
   Smaller than the standalone codepen module so it sits inside a card. */

feature-card .codepen {
	margin-top: 20px;
}

feature-card .cp_embed_iframe {
	height: clamp(300px, 50vh, 500px);
}