/* page-module.codepen — CodePen embed. Being phased out in favor of codestudy. */

page-module.codepen {
	.warning {
		color: var(--ink-error);
	}

	.section-heading + .codepen-placeholder {
		margin-top: var(--above-block);
	}

	.codepen-placeholder {
		aspect-ratio: 16 / 9;
		background: var(--viz-canvas-background);
		border: 1px dashed var(--stroke-secondary);
	}

	.codepen-placeholder + .warning {
		margin-top: var(--below-block);
	}

	.cp_embed_wrapper {
		margin-top: var(--above-block);
	}

	.codepen_module .cp_embed_iframe,
	.cp_embed_iframe {
		height: clamp(350px, 65vh, 600px);
		border: 1px solid #ccc;
	}

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

[data-prominence='featured'] page-module.codepen {
	@media (width >= 1000px) {
		grid-column: 2 / -2;
	}
}


/* Legacy class-based markup (.codepen_module). Still rendered by older
   content. Phasing out alongside the move to codestudy. */

.codepen_module {
	padding: 5vh 0;

	h2 {
		font-size: 1.5rem;
		font-weight: 700;
	}

	text-content {
		margin-top: 40px;
	}
}

iframe.codepen-embed {
	border: 1px solid black;
}