/* 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;
	height: 100%;
	box-sizing: border-box;
}

.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);}
}

/* background */ 

.COLUMNS[data-background]:not([data-background="0"]) .inner-wrapper {
	padding: var(--s5);
	border-radius: var(--s3);
}

.COLUMNS[data-background="1"] .inner-wrapper {background: var(--light-teal-400);}
.COLUMNS[data-background="3"] .inner-wrapper {background: var(--white); border: 1px solid var(--teal-on-dark-400); color: var(--black);}

.COLUMNS[data-background="2"] .inner-wrapper {background: no-repeat url(./assets/ui-column-deco.svg); background-size: 650rem 270rem; background-position: 40% 50%; color: var(--white);}
.COLUMNS[data-background="2"] .b-column:nth-child(1) .inner-wrapper {background-color: var(--black);}
.COLUMNS[data-background="2"] .b-column:nth-child(2) .inner-wrapper {background-color: var(--teal);}
.COLUMNS[data-background="2"] .b-column:nth-child(3) .inner-wrapper {background-color: var(--teal-on-white-500);}

.b-container[data-padding="medium"] .COLUMNS[data-background="2"] .inner-wrapper {background-size: 650rem 240rem; background-position: 40% 70%;}

@media screen and (max-width: 960px) {
	.b-container[data-padding="medium"] .COLUMNS[data-background="2"] .inner-wrapper {background-size: 649rem 225rem;background-position: 41% 59%;}
}

/* icon */

.COLUMNS[data-variant="icon"] .image {
	width: 60rem;
	overflow: hidden;
}

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

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



/* card */

.COLUMNS[data-variant="card"] .outer-wrapper {
	padding: var(--s3);
	background: var(--light-grey);
	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%;
}



/* MODAL */

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