/* 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;}
}



/* FRAMED */

.ROW[data-variant="framed"] .outer-wrapper {
	background: var(--light-grey);
	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;}
}

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



/* IMAGE OFFSET */

@media screen and (min-width: 961px) {
	.b-frame > .ROW[data-variant="image-offset"]:not([data-reverse]) .image {
		margin-left: calc((var(--page-width) / -2) + var(--col-6) + var(--s3));}
	.b-frame > .ROW[data-variant="image-offset"][data-reverse] .image {
		margin-right: calc((var(--page-width) / -2) + var(--col-6) + var(--s3));}
}

/* IMAGE BLOCKS */ 

.ROW[data-variant="image-blocks"] .inner-wrapper {
	background: var(--deep-teal-300);
    padding: var(--s7);
    border-radius: var(--s3);
}

@media screen and (min-width: 961px) {
	.ROW[data-variant="image-blocks"] .b-column:nth-child(2) {
		position: absolute;
		right: 0;
		bottom: -100rem;
	}
	.ROW[data-variant="image-blocks"][data-reverse] .b-column:nth-child(2) {
		left: 0;
	}

	.ROW[data-variant="image-blocks"] .b-column.alt-middle:nth-child(2) {bottom: auto;}
}

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