/* ROW */

.ROW {
	position: relative;
}

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

.ROW .image .b-img {
	display: none;
}

.ROW.alt-align-top .b-column:first-child {align-self: flex-start;}

@media screen and (min-width: 961px) {
	.ROW[data-reverse] .b-columns {flex-direction: row-reverse;}
	.ROW .image .b-img:first-child {display: block;}

	.ROW:not([data-reverse]) .image {padding-right: var(--s5);}
	.ROW[data-reverse] .image {padding-left: var(--s5);}
}

@media screen and (max-width: 960px) {
	.ROW .image .b-img:last-child {display: block;}
	.ROW .image {padding-bottom: var(--s4)}
}



/* FRAMED */

.ROW[data-variant="framed"] .outer-wrapper {
	background: var(--med-blue-400);
	overflow: hidden;
}

.ROW[data-variant="framed"] .inner-wrapper {
	padding: var(--s6);
}

@media screen and (min-width: 961px) {
	.ROW[data-variant="framed"] .b-column:first-child {align-self: flex-start;}
	.ROW[data-variant="framed"]:not([data-reverse]) .inner-wrapper {padding-left: 0;}
	.ROW[data-variant="framed"][data-reverse] .inner-wrapper {padding-right: 0;}
	.ROW[data-variant="framed"]:not([data-reverse]) .image {padding-right: var(--s3);}
}

@media screen and (max-width: 960px) {
	.ROW[data-variant="framed"] .inner-wrapper {padding: var(--s5);margin-top: var(--ns6);}
}



/* IMAGE OFFSET */

.ROW[data-variant="image-offset"] .content.alt-bottom {padding-top: var(--s4);}

@media screen and (min-width: 961px) {
	.b-frame > .ROW[data-offset="default"][data-variant="image-offset"]:not([data-reverse]) .image {
		margin-left: calc((var(--page-width) / -2) + var(--col-5) + var(--s3));}
	.b-frame > .ROW[data-offset="default"][data-variant="image-offset"][data-reverse] .image {
		margin-right: calc((var(--page-width) / -2) + var(--col-5) + var(--s3)); padding-left: 0;}
	.b-frame > .ROW[data-offset="pfa"][data-variant="image-offset"]:not([data-reverse]) .image {
		margin-left: -350rem;}
	.b-frame > .ROW[data-offset="pfa"][data-variant="image-offset"][data-reverse] .image {
		margin-right: -350rem; padding-left: 0;}
	.b-frame > .ROW[data-offset="slight"][data-variant="image-offset"]:not([data-reverse]) .image {
		margin-left: calc((var(--page-width) / -2) + var(--col-6) + var(--s6));}
	.b-frame > .ROW[data-offset="slight"][data-variant="image-offset"][data-reverse] .image {
		margin-right: calc((var(--page-width) / -2) + var(--col-6) + var(--s6)); padding-left: 0;}
	.ROW[data-variant="image-offset"] .content.alt-bottom {margin-top: auto;}
	.ROW[data-variant="image-offset"] .inner-wrapper {display: flex; flex-direction: column;}
	.ROW[data-offset="pfa"][data-variant="image-offset"] .content-wrapper {height: 100%; display: flex; justify-content: flex-start; flex-direction: column; flex: 0 0 var(--col-5);}
	.ROW.alt-cta[data-offset="pfa"][data-variant="image-offset"] .content-wrapper {flex: 0 0 var(--col-4);}
}


@media screen and (max-width: 960px) {
	.b-frame > .ROW[data-offset="pfa"][data-variant="image-offset"]:not([data-reverse]) .image {
		margin-left: var(--ns4); margin-right: var(--ns4); padding-bottom: var(--s2);}
	.b-frame > .ROW:not(.alt-cta)[data-offset="pfa"][data-variant="image-offset"][data-reverse] .image {
		margin-left: var(--ns4); margin-right: var(--ns4); padding-bottom: var(--s2);}

	.b-frame > .ROW[data-offset="pfa"] .b-columns {flex-direction: column-reverse;}
}