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

.COLUMNS .image {
	margin: 0 0 24rem 0;
	border-radius: 16rem;
	overflow: hidden;
}



/* stat card */

.COLUMNS[data-variant="1"] .container {
	padding: 48rem;
	background: var(--dark-navy);
	color: var(--white);
	box-sizing: border-box;
	height: 100%;
	border-radius: 16rem;
	overflow: hidden;
}

.COLUMNS[data-variant="1"] .b-pill {background-color: var(--light-navy) !important; color: var(--white) !important;}
.COLUMNS[data-variant="1"] .b-stat-number {margin-top: 64rem; color: var(--primary-orange);}

.COLUMNS[data-variant="1"] .b-column[data-width="1/3"] .container {padding: 32rem;}
.COLUMNS[data-variant="1"] .b-column[data-width="1/4"] .container {padding: 24rem;}

@media screen and (max-width: 960px) {
	.COLUMNS[data-variant="1"] .container {padding: 24rem !important; }
}

/* stat card - animation */

@media screen and (min-width: 961px) {
	.COLUMNS[data-variant="1"] .b-stat-number {position: relative; z-index: 0}
	.COLUMNS[data-variant="1"] .b-stat-number + p {position: relative; z-index: 1;}
	.COLUMNS[data-variant="1"] .b-column:nth-child(6n + 2) .animate-slideup{transition-delay: 0.7s;}
	.COLUMNS[data-variant="1"] .b-column:nth-child(6n + 3) .animate-slideup{transition-delay: 0.9s;}
	.COLUMNS[data-variant="1"] .b-column:nth-child(6n + 4) .animate-slideup{transition-delay: 1.1s;}
	.COLUMNS[data-variant="1"] .b-column:nth-child(6n + 5) .animate-slideup{transition-delay: 1.3s;}
	.COLUMNS[data-variant="1"] .b-column:nth-child(6n + 6) .animate-slideup{transition-delay: 1.5s;}
}



/* icon card */

.COLUMNS[data-variant="2"] .container {
	padding: 48rem;
	color: var(--dark-navy);
	box-sizing: border-box;
	height: 100%;
	border-radius: 16rem;
	background: linear-gradient(var(--primary-orange), var(--white));
	position: relative;
}

.COLUMNS[data-variant="2"] .container::before {
	background: var(--white);
	content: '';
	position: absolute;
	top: 2rem;
	left: 2rem;
	right: 2rem;
	bottom: 2rem;
	border-radius: 13rem;
}


.COLUMNS[data-variant="2"] .image {
	width: 64rem;
	border-radius: 0;
	position: relative;
}

.COLUMNS[data-variant="2"] .content {
	position: relative;
}

.COLUMNS[data-variant="2"] .b-column[data-width="1/3"] .container {padding: 32rem;}
.COLUMNS[data-variant="2"] .b-column[data-width="1/4"] .container {padding: 24rem;}

@media screen and (min-width: 961px) {
	.COLUMNS[data-variant="2"][data-numcols="2"]:not(.alt-software) .b-columns {padding-top: 64rem; flex-direction: row; align-items: flex-start;}
	.COLUMNS[data-variant="2"][data-numcols="2"]:not(.alt-software) .b-column {position: relative;}

	.COLUMNS[data-variant="2"][data-numcols="2"]:not(.alt-software) .container {height: auto;}
	.COLUMNS[data-variant="2"][data-numcols="2"]:not(.alt-software) .b-columns .image {float: left; margin: 0 32rem 0 0;}
	.COLUMNS[data-variant="2"][data-numcols="2"]:not(.alt-software) .b-columns .content {overflow: hidden;}


	.COLUMNS[data-variant="2"][data-numcols="2"][data-count="3"]:not(.alt-software) .b-columns .b-column:nth-child(3):last-child {transform: translate(624rem, 0);}
	.COLUMNS[data-variant="2"][data-numcols="2"][data-count="5"]:not(.alt-software) .b-columns .b-column:nth-child(5):last-child {transform: translate(624rem, 0);}
	.COLUMNS[data-variant="2"][data-numcols="2"][data-count="7"]:not(.alt-software) .b-columns .b-column:nth-child(7):last-child {transform: translate(624rem, 0);}
}

@media screen and (max-width: 960px) {
	.COLUMNS[data-variant="2"] .container {padding: 24rem !important;}
	.COLUMNS[data-variant="2"] .b-column .image {margin-bottom: 16rem;}
}



/* CONTACT CARD */

.COLUMNS[data-variant="3"] .image {
	width: 32rem;
	float: left;
	margin: 8rem 16rem 0 0;
}

.COLUMNS[data-variant="3"] .content a {
	font-size: 16rem;
	font-weight: 600;
}

@media screen and (max-width: 960px) {
	.COLUMNS[data-variant="3"] .image {float: none; margin: 0 0 12rem 0;}
}



/* SOFTWARE CARDS */

.COLUMNS.alt-software[data-variant="2"] .container {
	overflow: hidden;
	background: var(--dark-navy);
	color: var(--white);
	position: relative;
	border: none;
	transition: padding 0.25s;
}

.COLUMNS.alt-software[data-variant="2"] .container::before {
	display: none;
}

.COLUMNS.alt-software[data-variant="2"] .container::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4rem;
	background: var(--primary-orange);
	transform: scaleX(0);
	transform-origin: 0 0;
	transition: transform 0.25s;
}

.COLUMNS.alt-software[data-variant="2"] .container a {
	color: var(--primary-orange);
	display: flex;
	align-items: center;
}

.COLUMNS.alt-software[data-variant="2"] .container a::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.COLUMNS.alt-software[data-variant="2"] .container a::after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 32rem;
	height: 24rem;
	background: url(../../assets/images/ui-link-arrow.svg) no-repeat center / 100%;
	margin: 0 0 0 12rem;
	flex: 0 0 auto;
	transition: transform 0.25s;
}

.COLUMNS.alt-software[data-variant="2"] .flickity-viewport {overflow: visible;}
.COLUMNS.alt-software[data-variant="2"] .flickity-page-dots {display: none;}
.COLUMNS.alt-software[data-variant="2"] .flickity-prev-next-button {top: -128rem; transform: none;}
.COLUMNS.alt-software[data-variant="2"] .flickity-prev-next-button.previous {left: auto; right: 96rem;}
.COLUMNS.alt-software[data-variant="2"] .flickity-prev-next-button.next {left: auto; right: 16rem;}

.COLUMNS.alt-software[data-variant="2"][data-count="2"][data-numcols="2"] .flickity-prev-next-button {display: none;}
.COLUMNS.alt-software[data-variant="2"][data-count="3"][data-numcols="3"] .flickity-prev-next-button {display: none;}

@media screen and (min-width: 961px) {
	.b-page .COLUMNS.alt-software[data-variant="2"] .b-columns .container:hover::after {transform: scaleX(1.0);}
	.b-page .COLUMNS.alt-software[data-variant="2"] .b-columns .container:hover a::after {transform: translate(16rem, 0);}
}

@media screen and (max-width: 960px) {
	.COLUMNS.alt-software[data-variant="2"] .b-column .image {float: none; width: 64rem; margin: 0 0 16rem 0 !important;}
	.COLUMNS.alt-software[data-variant="2"] .flickity-prev-next-button {display: none;}
}



/* benefits challenges */

.COLUMNS[data-variant="4"] .container {
	padding: 48rem;
	box-sizing: border-box;
	height: 100%;
	border-radius: 16rem;
	position: relative;
}

.COLUMNS[data-variant="4"] .image {
	width: 64rem;
	border-radius: 0;
}

.COLUMNS[data-variant="4"] .b-column:nth-child(n+3) {
	display: none;
}

.COLUMNS[data-variant="4"] .b-column:nth-child(1) .container {
	background: var(--white);
	color: var(--dark-navy);
	border: 2rem solid var(--primary-orange);
}

.COLUMNS[data-variant="4"] .b-column:nth-child(2) .container {
	background: var(--dark-navy);
	color: var(--white);
}

.COLUMNS[data-variant="4"] .b-column:nth-child(2) .container :is(h1, h2, h3, h4) {
	color: var(--primary-orange);
}

/* overlap */

.b-section[data-variant="0"][data-bottom="0"] + .b-section[data-variant="1"][data-top="0"] .COLUMNS[data-variant="4"]:first-child {margin-top: -128rem;}
.b-section[data-variant="0"][data-bottom="0"] + .b-section[data-variant="1"][data-top="0"] .COLUMNS[data-variant="4"]::before {
	content: '';
	position: absolute;
	content: '';
	display: block;
	top: 0;
	height: 128rem;
	left: -999rem;
	right: -999rem;
	background: var(--white);
}

@media screen and (min-width: 961px) {
	.COLUMNS[data-variant="4"] .b-column:nth-child(1) {width: 33.33%;}
	.COLUMNS[data-variant="4"] .b-column:nth-child(2) {width: 66.66%;}
}

@media screen and (max-width: 960px) {
	.COLUMNS[data-variant="4"] .container {padding: 24rem;}
	.COLUMNS[data-variant="4"] .b-column .image {margin-bottom: 16rem;}

	.b-section[data-variant="0"][data-bottom="0"] + .b-section[data-variant="1"][data-top="0"] .COLUMNS[data-variant="4"]:first-child {margin-top: -64rem;}
	.b-section[data-variant="0"][data-bottom="0"] + .b-section[data-variant="1"][data-top="0"] .COLUMNS[data-variant="4"]::before {height: 64rem;}
}
