/* ROW */

.ROW {
	position: relative;
}

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

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

.ROW .content h1 + h5 + p {
	opacity: 0.8;
	margin-top: var(--s5);
}

.ROW[data-misc~="rounded-image"] .b-img {
	border-radius: var(--s4);
	overflow: hidden;
}

@media screen and (min-width: 961px) {
	.ROW .image .b-img:first-child {display: block;}

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

	.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~="image-offset"][data-misc~="reverse"] .image {padding-right: 0; padding-left: var(--s5);}
	.ROW[data-misc~="content-offset"][data-misc~="reverse"] .inner-wrapper {padding-left: 0; padding-right: var(--s5);}
}

@media screen and (max-width: 1440px) {
	.ROW .content h1 + h5 + p {margin-top: var(--s4);}
}

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



/* PFA */

.ROW[data-variant="pfa"] .b-columns {
	flex-direction: row-reverse;
	align-items: center;
	min-height: 480rem;
}

.ROW[data-variant="pfa"] .image {
	margin: var(--ns4) 0;
}

@media screen and (max-width: 960px) {
	.ROW[data-variant="pfa"] .b-columns {flex-direction: column-reverse; min-height: 0;}
	.ROW[data-variant="pfa"] .image {margin: var(--s3) 0 0;}
}



/* FRAMED */

.ROW[data-variant="framed"] .outer-wrapper {
	height: var(--height, calc(100% + 1px));
	border-radius: var(--s4);
	background: var(--purple-blue-gradient);
	box-sizing: border-box;
	margin: 0 0 -1px 0;
	overflow: hidden;
	position: relative;
	padding: var(--s5);
}

.ROW[data-variant="framed"] .outer-wrapper::before {
	content: '';
	position: absolute;
	top: 1px;
	left: 1px;
	right: 1px;
	bottom: 1px;
	background: var(--white);
	border-radius: calc(var(--s4) - 1px);
}

.ROW[data-variant="framed"] .inner-wrapper {
	position: relative;
}

.ROW[data-variant="framed"][data-misc~="rounded-image"] .b-img {
	border-radius: var(--s1);
}