.ROW .row::before,
.ROW .row::after {
	content: "";
	display: block;
	overflow: hidden;
}

.ROW .image {
	margin: 0 16rem 0 0;
}

.ROW .image.alt-mobile {
	display: none;
}

.ROW .image .caption {
	font-size: 16rem;
	margin-top: 16rem;
}

.ROW .content {
	position: relative;
}

@media screen and (min-width: 961px) {
	.ROW[data-reverse] .b-columns {flex-direction: row-reverse;}
	.ROW[data-reverse] .image {margin: 0 0 0 16rem;}

	.b-page-body > .b-section:first-child .ROW:first-child .b-column:nth-child(1) {align-self: flex-start;}
}

@media screen and (max-width: 960px) {
	.ROW .image {margin: 0 0 12rem 0;}
	.ROW .image .caption {font-size: 14rem;}
	.ROW .image.alt-desktop {display: none;}
	.ROW .image.alt-mobile {display: block;}
	.ROW .b-column[data-width="4"] .image {max-width: 368rem;}

	.b-page-body > .b-section:first-child .ROW:first-child .b-column:nth-child(1) {order: 2;}
	.b-page-body > .b-section:first-child .ROW:first-child .b-column:nth-child(2) {order: 1;}
}

@media screen and (max-width: 576px) {
	.ROW .content .b-button.alt-text {line-height: 24rem;}
}



/* Variant 1  - bordered w/ 2 contents */

.ROW[data-variant="1"] .b-columns {
	align-items: stretch;
}

.ROW[data-variant="1"] .row > .b-columns {
	border-radius: 16rem;
	box-sizing: border-box;
	background: linear-gradient(var(--primary-orange), var(--white));
	position: relative;
}

.ROW[data-variant="1"] .row > .b-columns::before {
	background: var(--white);
	content: '';
	position: absolute;
	top: 2rem;
	left: 2rem;
	right: 2rem;
	bottom: 2rem;
	border-radius: 13rem;
}

.ROW[data-variant="1"] .row > .b-columns > .b-column {
	position: relative
}

.ROW[data-variant="1"] .image {
	padding: 0 72rem;
	background: var(--light-grey);
	border-radius: 16rem;
	margin: 0;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ROW[data-variant="1"] .contents {
	background: var(--light-grey);
	border-radius: 16rem;
	padding: 48rem;
	height: 100%;
	box-sizing: border-box;
}

@media screen and (max-width: 960px) {
	.ROW[data-variant="1"] .b-column[data-width="4"] .image {max-width: 100%;}
	.ROW[data-variant="1"] .contents {padding: 24rem;}
}



/* Variant 2  - imageoverflow */

.ROW[data-variant="2"] .b-column .image {
	margin: 0 72rem 0 -352rem;
}

.ROW[data-variant="2"][data-reverse] .image {
	margin: 0 -352rem 0 72rem;
}

@media screen and (max-width: 961px) {
	.ROW[data-variant="2"] .b-column .image {margin: 0 0 0 -230rem;}
	.ROW[data-variant="2"][data-reverse] .image {margin: 0 -230rem 0 0;}
}

@media screen and (max-width: 576px) {
	.ROW[data-variant="2"] .b-column .image {margin: 0 0 0 -36rem;}
	.ROW[data-variant="2"][data-reverse] .image {margin: 0 -36rem 0 0;}
}



/* HOME */

.ROW.alt-home .content {
	position: relative;
}

.ROW.alt-home .content::before {
	content: '';
	position: absolute;
	top: 192rem;
	left: 96rem;
	bottom: 96rem;
	right: 64rem;
	border-radius: 128rem;
	background: var(--dark-navy);
	box-shadow: 0 0 192rem 192rem var(--dark-navy);
	z-index: -1;
}

@media screen and (max-width: 960px) {
	.ROW.alt-home .content::before {display: none;}
}



/* animation */

@media screen and (min-width: 961px) {

	/* PFA */
	.b-section:first-child .ROW[data-variant="0"][data-reverse] .image[data-animate] {
		opacity: 0;
		transform: translate(-50rem, 0);
		transition: opacity 0.5s, transform 0.5s;
		transition-delay: 0.5s;
	}

	/* CTA */
	.b-section:last-child .ROW:not(.alt-home)[data-variant="0"] .image[data-animate] {
		opacity: 0;
		transform: translate(50rem, 0);
		transition: opacity 0.5s, transform 0.5s;
		transition-delay: 0.5s;
	}

	.b-section:first-child .ROW[data-variant="0"][data-reverse] .image[data-animate="true"],
	.b-section:last-child .ROW:not(.alt-home)[data-variant="0"] .image[data-animate="true"] {
		opacity: 1;
		transform: translate(0, 0);
	}
}