.c-image {
	@include restrict-m;
	display: block;

	& > img {
		display: block;
		position: relative;
		width: 100%;
		min-height: 130px;
		text-align: center;

		&:before {
			@include border-radius;
			@include font-size(xs);
			content: "We're sorry, this image is broken :(";
			display: block;
			position: absolute;
			top: -10px;
			left: 0;
			height: calc(100% + 20px);
			width: 100%;
			padding: 15px;
			background-color: palette(neutral);
			background-image: url(/img/kms/dynamic/image.svg);
			background-repeat: no-repeat;
			background-position: bottom 20px center;
			background-size: 130px;
			border: 2px solid palette(neutral, 100);
		}
	}
}

.c-image__placeholder{
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 66.67%;
	background-color: palette(neutral);
	background-image: url("/img/kms/dynamic/image.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 200px auto;
	border: 1px solid rgba(palette(text, 200), 0.3);
	@include border-radius(l);

	&--video{
		padding-bottom: calc(100% / 16 * 9);
		background-image: url("/img/kms/dynamic/video-block.svg");
	}
}