.wp-block-embed {
	margin: 0;
	clear: both; // necessary because we use responsive trickery to set width/height, and therefore the video doesn't intrinsically clear floats like an img does

	&.is-loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 1em;
		min-height: 200px;
		text-align: center;
		background: $light-gray-100;
		p {
			font-family: $default-font;
			font-size: $default-font-size;
		}
	}

	&.is-video > .wp-block-embed__wrapper {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 56.25%; /* 16:9 */
	}

	&.is-video > .wp-block-embed__wrapper > iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
