/* COLUMNS */

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

.COLUMNS .outer-wrapper {
	height: 100%;
}

.COLUMNS .inner-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	height: 100%;
}

.COLUMNS .content {
	flex-grow: 1;
}

.COLUMNS .image {
	align-self: flex-start;
	flex-shrink: 0;
	margin-bottom: var(--s4);
	width: 100%;
}

.COLUMNS .link {
	font-weight: 700;
	margin-top: var(--ps);
}

.COLUMNS .link a {text-decoration: none;}

@media screen and (max-width: 960px) {
	.COLUMNS .image {margin-bottom: var(--s3);}
}



/* icon */



.COLUMNS[data-variant="icon"] .inner-wrapper {
    border: 1px solid var(--orange);
    text-align: center;
    justify-content: center;
	padding: var(--s5);
}

.COLUMNS[data-variant="icon"] .image {
	width: var(--s7);
	overflow: hidden;
	margin: 0 auto var(--s4) ;
}

.COLUMNS[data-variant="icon"] .content {
	max-width: 300rem;
	margin: auto;
}


.COLUMNS[data-variant="icon"] .b-column[data-width="1/2"] .inner-wrapper {text-align: left;}
.COLUMNS[data-variant="icon"] .b-column[data-width="1/2"] .image {margin: 0 0 var(--s4) 0;}
.COLUMNS[data-variant="icon"] .b-column[data-width="1/2"] .content {padding-right: var(--s5); max-width: none;}



.COLUMNS.alt-icon .image {
	width: var(--s7);
	overflow: hidden;
	margin: 0 0 var(--s4) 0;
}

/* @media screen and (max-width: 960px) {
	.COLUMNS[data-variant="icon"] .inner-wrapper {flex-direction: row; align-items: center;}
	.COLUMNS[data-variant="icon"] .image {width: var(--s7); margin: 0 var(--s3) 0 0;}
} */



/* card */

.COLUMNS[data-variant="card"] .outer-wrapper {
	padding: var(--s5);
	background: var(--white);
	box-sizing: border-box;
	height: 100%;
}

.COLUMNS[data-variant="card"] .inner-wrapper {
	height: 100%;
}

.COLUMNS[data-variant="card"] .link a::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* card carousel */ 

.COLUMNS[data-variant="card-carousel"] .inner-wrapper {background: var(--light-blue-300);}
.COLUMNS[data-variant="card-carousel"] .image {margin-bottom: 0;}
.COLUMNS[data-variant="card-carousel"] .content {padding: var(--s4) var(--s5);}

.COLUMNS[data-variant="card-carousel"]  .carousel-cta {
    padding: 0 var(--s1) var(--s5);
    width: 94%;
}

.COLUMNS[data-variant="card-carousel"]  .carousel-cta .inner-wrapper{
	background: var(--white);
}

.COLUMNS[data-variant="card-carousel"] .flickity-prev-next-button.previous {
	background: transparent; color: var(--med-blue-400);
}

.COLUMNS[data-variant="card-carousel"] .flickity-prev-next-button .flickity-button-icon {
	transition: all .25s;
}

.COLUMNS[data-variant="card-carousel"] .flickity-prev-next-button.previous:hover .flickity-button-icon{
	background: var(--dark-blue-400);
	color: var(--white);
}

.COLUMNS[data-variant="card-carousel"] .flickity-prev-next-button.next:hover .flickity-button-icon{
	background: var(--dark-blue-400);
	color: var(--white);
}

@media screen and (min-width: 961px) {
	.COLUMNS[data-variant="card-carousel"]  .carousel-cta {
		padding: var(--s3);
		width: 33.3333%;
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		box-sizing: border-box;
		height: 97%;
		z-index: 2;
		top: -17rem;
		right: 0;
	}

	.COLUMNS[data-variant="card-carousel"]  .carousel-cta .inner-wrapper{
		background: var(--white);
		border: 1px solid var(--orange);
		padding: var(--s4) var(--s5);
	}
	
	.COLUMNS[data-variant="card-carousel"] .flickity-prev-next-button {z-index: 2; bottom: 15%;}
	.COLUMNS[data-variant="card-carousel"] .flickity-prev-next-button.previous {left: calc(56.5% + var(--col-4));} 
	.COLUMNS[data-variant="card-carousel"] .flickity-prev-next-button.next {right: var(--s5);}
	.COLUMNS[data-variant="card-carousel"] .flickity-page-dots {bottom: 15%; right: var(--s11);}
}


@media screen and (max-width: 960px) {
	.COLUMNS[data-variant="card-carousel"] .flickity-prev-next-button {bottom: -60rem;}
	.COLUMNS[data-variant="card-carousel"] .flickity-prev-next-button.previous {left: 10rem;}
	.COLUMNS[data-variant="card-carousel"] .flickity-prev-next-button.next {right: 0;left: 56rem;}
	.COLUMNS[data-variant="card-carousel"] .flickity-page-dots {bottom: -60rem;right: 10rem;}
}

/* CAROUSEL */ 

.COLUMNS[data-variant="default"] .flickity-prev-next-button.previous {
	background: transparent; color: var(--med-blue-400);
}

.COLUMNS[data-variant="default"] .b-columns.alt-flickity .b-column:nth-child(1)  .inner-wrapper {background: var(--white);}
.COLUMNS[data-variant="default"] .b-columns.alt-flickity .b-column:nth-child(2)  .inner-wrapper {background: var(--light-blue-300);}
.COLUMNS[data-variant="default"] .b-columns.alt-flickity .image {margin-bottom: 0;}
.COLUMNS[data-variant="default"] .b-columns.alt-flickity .content {padding: var(--s3) var(--s4);}

@media screen and (min-width: 961px) {	
	.COLUMNS[data-variant="default"] .flickity-prev-next-button {z-index: 2; bottom: 15%;}
	.COLUMNS[data-variant="default"] .flickity-prev-next-button.previous {left: calc(56.5% + var(--col-4)); background: transparent; color: var(--med-blue-400);} 
	.COLUMNS[data-variant="default"] .flickity-prev-next-button.next {right: var(--s5);}
	.COLUMNS[data-variant="default"] .flickity-page-dots {bottom: 15%; right: var(--s11);}
}


@media screen and (max-width: 960px) {
	.COLUMNS[data-variant="default"] .flickity-prev-next-button {bottom: -60rem;}
	.COLUMNS[data-variant="default"] .flickity-prev-next-button.previous {left: 10rem;}
	.COLUMNS[data-variant="default"] .flickity-prev-next-button.next {right: 0;left: 57rem;}
	.COLUMNS[data-variant="default"] .flickity-page-dots {display: none;}
}

/* TABLE */ 

.COLUMNS[data-variant="default"] table td {padding: var(--s3); vertical-align: top;}
.COLUMNS[data-variant="default"] table tr:first-child {text-align: center;}
.COLUMNS[data-variant="default"] table tr:first-child img {margin: 0 auto;}
.COLUMNS[data-variant="default"] table tr:first-child td {border: none; padding: var(--s5) var(--s5) var(--s2); vertical-align: top;}

.COLUMNS[data-variant="default"] table tr:last-child td {padding-bottom: var(--s5); border: none;}




/* DIVIDER */ 

.COLUMNS[data-variant="divider"] :is(h3, h4, h5, h6) {
	padding-bottom: var(--s3);
	border-bottom: 1px solid var(--slate-gray);
	margin-bottom: var(--s3);
}

@media screen and (max-width: 960px) {
	.COLUMNS[data-variant="divider"] .b-column:not(:last-child) .outer-wrapper {padding-bottom: var(--s4);}
}


/* MODAL */

.b-modal .COLUMNS {width: 9999rem; max-width: 100%;}
