/* ROW */

.ROW {
	position: relative;
}

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

.ROW[data-alignment~="center"] .b-columns {align-items: center;}
.ROW[data-alignment~="bottom"] .b-columns {align-items: flex-end;}

@media (width > 960px) {
	.ROW[data-misc~="image-offset"] .image {padding-right: var(--s5);}
	.ROW[data-misc~="content-offset"] .inner-wrapper {padding-left: var(--s5);}

	.ROW[data-misc~="reverse"] .b-columns {flex-direction: row-reverse;}
	.ROW[data-misc~="reverse"][data-misc~="image-offset"] .image {padding-right: 0; padding-left: var(--s5);}
	.ROW[data-misc~="reverse"][data-misc~="content-offset"] .inner-wrapper {padding-left: 0; padding-right: var(--s5);}
}



/* FRAMED */

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

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

@media (width > 960px) {
	.ROW[data-variant="framed"]:not([data-misc~="reverse"]) .inner-wrapper {padding-left: 0 !important;}
	.ROW[data-variant="framed"][data-misc~="reverse"] .inner-wrapper {padding-right: 0 !important;}

	.ROW[data-variant="framed"][data-misc~="image-offset"]:not([data-misc~="reverse"]) .image {padding-right: var(--s3) !important;}
}

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



/* IMAGE OFFSET */

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

	.b-frame > .acf-innerblocks-container > .wp-block > .ROW[data-variant="image-offset"]:not([data-misc~="reverse"]) .image {
		margin-left: var(--ns6); position: relative; z-index: 2;}
	.b-frame > .acf-innerblocks-container > .wp-block > .ROW[data-variant="image-offset"][data-misc~="reverse"] .image {
		margin-right: var(--ns6); position: relative; z-index: 2;}
}

/* ALTS */ 

.ROW.alt-icon .b-column:nth-child(1) {
	width: 20%
}

@media screen and (max-width: 960px) {
	.ROW.alt-icon .b-column:nth-child(2) {width: 80%;}
}