/* ====
   CARD
   ==== */	
   
.m__card__featured {
	padding-bottom: 6rem; }   


		
.card__featured__wrapper { }	

.card__featured__body {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	padding: 5rem 2rem;
	padding-bottom: 40rem;}
	
.card__featured__body__content {
	width: 100%; }

.card__featured__body__image {
	position: absolute;
	height: 35rem;
	bottom: -2rem;
	
	width: calc(100% + 12rem);
	right: -2rem; }

.card__featured__body:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2rem;
	display: block;
	z-index: 1; }

.card__featured__content__caption {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 2rem;
	height: 35rem;
	display: block;
	z-index: 1; }


.card__featured__body__content:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 2rem;
	height: 35rem;
	display: block;
	z-index: 1; }	
	
	
.card__featured__content__caption .caption,
.card__featured .card-cutaway_wrapper {
	display: none; }

.card__featured__body h2 {
	margin-bottom: 1.5rem; }

.card__featured__body .card-cta {
	margin-top: 3rem; }
	
.card__featured__body,
.card__featured__body:after,
.card__featured__content__caption,
.card__featured__body__content:after {
	background: var(--color-gray); }


.card__featured__green .card__featured__body,
.card__featured__green .card__featured__body:after,
.card__featured__green .card__featured__content__caption,
.card__featured__green .card__featured__body__content:after {
	background: var(--color-green); }
	
	
@media all and (min-width: 768px) {

	.card__featured__body {
		padding-bottom: 48rem;
		margin-left: 6rem;
		margin-right: 6rem; }
	
	.card__featured__body__image {
		height: 45rem;
		right: -9rem;
		width: calc(100% + 18rem);
		bottom: -5rem; }
		
	.card__featured__content__caption,
	.card__featured__body__content:after {
		width: 3rem;
		height: 45rem; }	
}

@media all and (max-width: 1100px) {

	.m__card__featured .mc {
		max-width: 800px; }
	
}
	

@media all and (min-width: 1100px) {
	
	
	.card__featured__body {
		padding: 8.5rem 9.5rem; }
		
	.card__featured__body__content {
		width: 40%; }
	
	.card__featured__body__image {
		height: calc(100% - 6.5rem);
		width: calc(50% + 12rem);
		top: 15rem;
		bottom: -9.5rem;
		right: -12rem; }
	
	.card__featured__body:after {
		height: 3.5rem; }
	
	.card__featured__content__caption {
		width: 11rem;
		height: 100%; }
	
	.card__featured .card-cutaway_wrapper {
		display: block;
		position: absolute;
		top: 4rem;
		right: 0;
		z-index: 5;
		height: 11rem;
		width: 11rem; }
	
	.card__featured__content__caption .caption {
		position: absolute;
		transform-origin: left bottom;
		transform: rotate(-90deg);
		height: 11rem;
		line-height: 11rem;
		width: 200%;
		display: block;
		left: 100%;
		z-index: 555;
		bottom: 3.5rem; }
		
	.card__featured__body__content:after {
		display: none; }

	.card__featured__body .card-cta {
		margin-top: 4rem; }
		
		
	 
	/* Reverse */	

	.card__featured__reverse .card__featured__body__content {
		margin-left: 60%; }

	.card__featured__reverse .card__featured__body__image {
		right: auto;
		left: -12rem; }
	
	.card__featured__reverse .card-cutaway_right svg {
		transform: rotate(90deg); }
		
	.card__featured__reverse .card__featured .card-cutaway_wrapper {
		right: auto;
		left: 0; }
		
	.card__featured__reverse .card__featured__content__caption { 
		right: auto;
		left: 0; }	
		
		
	/* Animation */
	.card__featured__body__image {
		transition: all .6s;
		transform: translateX(100px); }
		
	.card__featured__reverse .card__featured__body__image {
		transform: translateX(-100px); }	
	
	.active .card__featured__body__image {
		transform: translateX(0); }
		
}