.cr-article {
	width: 100%;
	background-color: $colour-smoke-grey;
	@include breakpoint($screen-lg) {
		padding: 60px 0;
	}
}
.cr-article__content-wrapper {
	max-width: 800px;
	margin: 0 auto;
}
.cr-article__social-links {
  @include clearfix;
  display: block;
}
.cr-article__header {
	margin: auto;
	padding: 40px 0;
	overflow: visible;
	text-align: center;
	background-color: $colour-white;
}
.cr-article__header--no-caption{
	padding-bottom: 0;
}
.cr-article__title {
	margin: 30px;
	font-family: $font-medium;
	@include font-size($h2-font-size);
}
.cr-article__date {
	font-family: $font-black;
	text-transform: uppercase;
}
.cr-article__image,
.cr-article__video {
	padding: 40px 0px;
	img {
		display: block;
	}
}
.cr-article {
	figcaption {
		margin-top: -40px; //move caption up against image/video
		padding: 10px 15px;
		background-color: $colour-black;
		color: $colour-white;
		text-align: right;
	}
}

.cr-article__body {
	margin: auto;
	padding: 0 30px 40px;
	background-color: $colour-white;

	.video-embed-field-responsive-video,
	 figure,
	 img {
		width: calc(100% + 60px); //body has padding
		margin: 15px 0 15px -30px;
	}
	.video-embed-field-responsive-video {
		margin: 30px 0 40px -30px;
	}
	figure {
		margin-top: 30px;
	}
	figure {
		img {
			width: 100%;
			margin: 0;
		}
		figcaption {
			width: 100%;
			margin: 0px 0px 15px;
		}
	}
	figcaption {
		width: calc(100% + 60px);
		margin: -40px 0 30px -30px;
	}
}

@include breakpoint($screen-lg) {
	.cr-article__header {
		width: 80%;
		padding: 60px 0 30px;
	}
	.cr-article__header--no-caption{
		padding-bottom: 0;
	}
	.cr-article__image,
	.cr-article__caption,
	.video-embed-field-responsive-video,
	figcaption,
	figure {
		width: calc(100% + (4 * 60px));
		margin-left: -120px;
	}
	.cr-article__body {
		width: 80%;
		padding: 30px 60px 60px;

		.video-embed-field-responsive-video,
		figure,
		img,
		figcaption {
			width: calc(100% + (6 * 60px));
			margin-left: -180px;
		}
		figure {
			img {
				width: 100%;
				margin: 0;
			}
			figcaption {
				width: 100%;
			}
		}
	}
}

.cr-article__bottom-region {
	max-width: 100%;
	margin: 0px;
	background-color: $colour-red;
}