// todo create hbs file styleguide component

.media-cr-image {
	text-align: center;	
	figure,
	img { 
		width: 100%;
		margin: 15px 0;
	}
	&.view-mode-large {
		figure,
		img {
			@include breakpoint($screen-lg) {
				width: calc(100% + (4 * 60px));
				margin-left: -120px;
			}
		}
	}
	&.view-mode-medium {
		figure,
		img {
			@include breakpoint($screen-lg) {
				width: span(10);
				margin: 15px auto;
			}
		}
	}
	&.view-mode-small {
		figure,
		img {
			@include breakpoint($screen-lg) {
				width: span(8);
				margin: 15px auto;
			}
		}
	}
}