.row{}

.row__image-callout{
	
	position:relative;
	margin:7.5rem 0;
	background-color:$black;
	
	@include breakpoint(small only){
		margin:3rem 0;
		padding-bottom:1.5rem;
	}
	
	
	.grid-x{align-items: center;}
	
	.cell__image{
		padding-left:1.5rem;
		padding-right:1.5rem;
		.column-wrapper{
			position:relative;
			height:0;
			padding-bottom:100%;
		}
		.shape{
			position:absolute;top:-3rem;right:-3rem;bottom:-3rem;left:-3rem;transform:translateX(-4.5rem);background-color:$light-gray;
			
			&::before{content:"";position:absolute;top:3rem;left:0;right:0;border-top:solid 1px rgba($white,0.5);z-index:10;}
			&::after{content:"";position:absolute;bottom:3rem;left:0;right:0;border-bottom:solid 1px rgba($white,0.5);z-index:10;}
			
			@include breakpoint(small only){
				top:0;right:0;bottom:0;left:0;
				transform:translateX(0);
				
				&::before{border:solid 1px rgba($white,0.5);z-index:10;top:1.5rem;right:1.5rem;bottom:1.5rem;left:1.5rem;}
				&::after{display:none;}
			}
		}
		
		img{position:absolute;right:0;left:0;}
	}
	
	.cell__text{
		
		padding-left:1.5rem;
		padding-right:1.5rem;
		padding-top:3rem;
		padding-bottom:3rem;
		
		*{color:$white;}
		p:last-of-type{margin:0;}
		.button{background-color:$white;color:$black;margin:1.5rem 0 0 0;}
		p a{color:$primary-color;}
	}
	
	
	
	
}

.row__image-callout-centered{
	
	background:none;
	margin:3rem 0;
	
	.grid-container{background:rgba($black,0.05);}
		
	.cell__text{
		.column-wrapper{padding:1.5rem;}
		*{color:$black;}	
		.button{background-color:$primary-color;color:$white;margin:1.5rem 0 0 0;}
	}
	
	.cell__image{
		
		.shape{
			position:absolute;top:-1.5rem;right:-1.5rem;bottom:-1.5rem;left:-1.5rem;transform:none;
			&::before{
				content:"";position:absolute;top:1.5rem;left:1.5rem;bottom:1.5rem;border:solid 1px rgba($white,0.5);border-right:none;z-index:10;	
			}
			&::after{display:none;}
			
		}
		
	}
	
	.grid-x > .cell__text + .cell__image .shape::before{left:0;right:1.5rem;border:solid 1px rgba($white,0.5);border-left:none;	}
	
	@include breakpoint(medium down){
		
	}
	
}


.row__quotes,
.row__customer-quote{
	
	blockquote{
		padding:0;
		@include font-for-header(200);
		text-transform:uppercase;
		text-align:center;
		letter-spacing:0.125rem;
		font-size:1.5rem;
		border:none;
		color:$black;
	}
	
	p{
		text-align:center;
		font-weight: bold;
	}
	
	span{}
	
}


.row__spacer{
	
	.default-spacer{height:1.5rem;}
	.space-1{height:1.5rem;}
	.space-2{height:3rem;}
	.space-3{height:4.5rem;}
	.space-4{height:6rem;}
	.space-5{height:7.5rem;}
	
}

.row__cards{
	
	position:relative;
	background-color:$black;
	margin-top:1.5rem;
	
	.grid-container{position:relative;z-index:10;}
	
	.column-wrapper[edittype=image]{height:0;padding-bottom:100%;background:$light-gray;}
	
	&::before{content:"";position:absolute;top:0;left:0;right:0;height:3rem;background:$white;z-index:0;}
	&::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3rem;background:$white;z-index:0;}

	.button{margin:0;}
	img{width:100%;}
	
	@include breakpoint(small only){
		.card-section{padding:1.5rem;}
	}
	
}