/* COLUMNS */

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

.COLUMNS .inner-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

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

.COLUMNS .content:has(.b-stats) {
	width: 100%;
}

.COLUMNS .image {
	align-self: flex-start;
	flex-shrink: 0;
	margin-bottom: var(--s5);
	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="1"] .image {
	width: var(--s9);
	overflow: hidden;
}

@media screen and (min-width: 961px) {
	.COLUMNS[data-variant="1"] .b-column[data-width="1/2"] .inner-wrapper {flex-direction: row; align-items: center;}
	.COLUMNS[data-variant="1"] .b-column[data-width="1/2"] .image {margin: 0 var(--s5) 0 0;}
	.COLUMNS[data-variant="1"] .b-column[data-width="1/2"] .content {padding-right: var(--s5);}
}

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



/* card */

.COLUMNS[data-variant="2"] .outer-wrapper {
	padding: var(--s5);
	background: transparent;
	border-radius: var(--s3);
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
}

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

.COLUMNS[data-variant="2"] .image {
	width: 135rem;
}

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

/* BG COLOR */ 

.COLUMNS[data-variant="2"][data-bg="1"] .outer-wrapper {background: var(--deep-indigo);}
.COLUMNS[data-variant="2"][data-bg="2"] .outer-wrapper {background: var(--mint);}
.COLUMNS[data-variant="2"][data-bg="3"] .outer-wrapper {background: var(--melrose);}
.COLUMNS[data-variant="2"][data-bg="4"] .outer-wrapper {background: var(--white);}
.COLUMNS[data-variant="2"][data-bg="5"] .outer-wrapper {border: 1rem solid var(--melrose); font-size: 20rem;}
.COLUMNS[data-variant="2"][data-bg="6"] .outer-wrapper {background: var(--yellow);}

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

/* .COLUMNS[data-variant="2"] .b-stats::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--deep-indigo);
    height: 1px;
    width: -webkit-fill-available;
} */

@media screen and (max-width: 960px) {
	.COLUMNS[data-variant="2"][data-bg="5"] .outer-wrapper {font-size: 18rem;}
	.COLUMNS[data-variant="2"] .image {width: var(--s7);}
}


/* LOGOS */ 

.COLUMNS[data-variant="3"] .inner-wrapper {
	background: var(--white);
	padding: var(--s4);
	border-radius: var(--s3);
}

.COLUMNS[data-variant="3"] .image {
	border-radius: var(--s1);
	overflow: hidden;
}

.COLUMNS[data-variant="3"] ul {
	margin-top: var(--s5);
}

.COLUMNS[data-variant="3"] .logos {
	display: flex;
	justify-content: space-between;
	margin-top: var(--s5);
	margin-bottom: var(--s5);
}

.COLUMNS[data-variant="3"] .logos .b-img {
	max-width: var(--col-1);
	height: var(--s5);
}

/* HOME TABLES */ 

.COLUMNS[data-variant="5"] .outer-wrapper {
	padding: var(--s7);
	background: transparent;
	border-radius: var(--s3);
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
}

.COLUMNS[data-variant="5"] .b-column:nth-child(odd) .outer-wrapper {background: var(--gray-100);}
.COLUMNS[data-variant="5"] .b-column:nth-child(even) .outer-wrapper {background: var(--deep-indigo); color: var(--white);}

.COLUMNS[data-variant="5"] :is(h3, h4, h5, .b-img-container) {text-align: center;}
.COLUMNS[data-variant="5"] .b-img-container {
	max-width: 240rem;
	margin: 0 auto;
}

.COLUMNS[data-variant="5"] ul li {
	list-style: none;
	position: relative;
	padding-top: var(--s2);
	padding-bottom: var(--s3);
}

.COLUMNS[data-variant="5"] .b-column:nth-child(1)  ul li {
	padding-bottom: var(--s5);
}

.COLUMNS[data-variant="5"] ul li::before {
	content: '';
	position: absolute;
	top: var(--s2);
	left: var(--ns5);
	background-repeat: no-repeat;
	background-position: left;
	width: var(--s4);
	height: var(--s4);
}

.COLUMNS[data-variant="5"] ul li::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: var(--ns5);
	background: var(--white);
	height: 1px;
	width: -webkit-fill-available;
}

.COLUMNS[data-variant="5"] .b-column:nth-child(1) ul li::after {
	background: var(--deep-indigo);
}

.COLUMNS[data-variant="5"] ul li:last-child::after {background: none;}
.COLUMNS[data-variant="5"] .b-column:nth-child(1) ul li:last-child::after {background: none;}


.COLUMNS[data-variant="5"] ul li::before {
	background-image: url(../../assets/images/ui-checkmark.svg);
}
.COLUMNS[data-variant="5"] .b-column:nth-child(1) ul li::before {
	background-image: url(../../assets/images/ui-x.svg);
}

@media screen and (max-width: 960px) {
	.COLUMNS[data-variant="5"] .outer-wrapper {padding: var(--s5);}
}


/* about */ 

.COLUMNS.alt-about .image {
	width: 100%;
}

.COLUMNS.alt-about .outer-wrapper {padding: 0;}
.COLUMNS.alt-about .content {padding: 0 var(--s7) var(--s5); width: auto;}

@media screen and (max-width: 960px) {
	.COLUMNS.alt-about .content {padding: 0 var(--s5) var(--s5);}
}


/* timeline */ 

.COLUMNS[data-variant="4"] .outer-wrapper {
	padding: var(--s5);
	background: var(--white);
	border: 1px solid var(--melrose);
	border-radius: var(--s3);
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
}

.COLUMNS[data-variant="4"] .image-container {
	display: flex;
	align-items: center;
	gap: var(--s3);
	margin-bottom: var(--s5);
}

.COLUMNS[data-variant="4"] .image {
	max-width: 56rem;
	border-radius: 50%;
	margin-bottom: 0;
	overflow: hidden;
}

.COLUMNS[data-variant="4"] .year {
	font-weight: 700;
}

.COLUMNS[data-variant="4"] .flickity-viewport {overflow: visible;}

@media screen and (min-width: 961px) {
	.COLUMNS[data-variant="4"]  .b-columns.alt-flickity .b-column {width: 75%;}
}

/* alt-images */ 

.COLUMNS.alt-images .outer-wrapper {padding: 0; background: var(--deep-indigo);}
.COLUMNS.alt-images .image {width: 100%; margin-bottom: 0;}


/* MODAL */

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


/* FIX: NEW ALIGN IMAGES OPTION WITH "CARD" VARIANT OF COLUMNS BLOCK (.card-images-left / .card-images-right) */

.COLUMNS.card-images-left .outer-wrapper,
.COLUMNS.card-images-right .outer-wrapper {
	padding: var(--s3) !important;
}

.COLUMNS.card-images-left .inner-wrapper {
	flex-direction: row !important;
}

.COLUMNS.card-images-right .inner-wrapper {
	flex-direction: row-reverse !important;
}

.COLUMNS.card-images-left .inner-wrapper .image {
	align-self: center;
	margin-bottom: unset;
	width: 64rem !important;
	margin-right: var(--s2);
}

.COLUMNS.card-images-right .inner-wrapper .image {
	align-self: center;
	margin-bottom: unset;
	width: 64rem !important;
	margin-left: var(--s2);
}