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

.COLUMNS .image {
	margin: 0 0 20rem 0;
}

.COLUMNS[data-center-align-image] .image {
	margin-left: auto;
	margin-right: auto;
}

.COLUMNS .container.bg_black,
.COLUMNS .container.bg_grey,
.COLUMNS .container.bg_midnight-blue, 
.COLUMNS .container.bg_light-blue, 
.COLUMNS .container.bg_bright-light-blue {
	height: 100%;
	padding: 25rem;
	border-radius: 10rem;
	box-sizing: border-box;
}



/* card */

.COLUMNS[data-variant="_card"] .container {
	background: var(--grey);
	height: 100%;
	padding: 25rem;
	border-radius: 10rem;
	box-sizing: border-box;
}



/* icon */

.COLUMNS[data-variant="_icon"] .container {
	height: 100%;
	box-sizing: border-box;
}

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

.COLUMNS[data-variant="_icon"] .b-column[data-width="1/2"] .image {float: left; margin: 0 20rem 0 0;}
.COLUMNS[data-variant="_icon"] .b-column[data-width="1/2"] .content {overflow: hidden; min-height: 80rem;}

@media screen and (max-width: 960px) {
	.COLUMNS[data-variant="_icon"] .image {width: 60rem;}
	.COLUMNS[data-variant="_icon"] .content {overflow: hidden; min-height: 60rem;}
}


/* icon-with with arrows (unique) */

.COLUMNS[data-variant="_icon"].alt-with-arrows .b-column { display: flex; flex-direction: column; }
.COLUMNS[data-variant="_icon"].alt-with-arrows .container { height: auto; flex: 1 1 100%; }

.COLUMNS[data-variant="_icon"].alt-with-arrows > .path,
.COLUMNS[data-variant="_icon"].alt-with-arrows .b-column > .arrow { width: fit-content; margin: 0 auto; }

.COLUMNS[data-variant="_icon"] > .path > svg,
.COLUMNS[data-variant="_icon"] .b-column > .arrow > svg { height: inherit; }

@media screen and (max-width: 960px) {
	.COLUMNS[data-variant="_icon"].alt-with-arrows {
		box-sizing: border-box;
		padding: 30rem;
		background: var(--grey);
		border-radius: 10rem;
		margin: 120rem 0 100rem;
		position: relative;
	}
	
	.COLUMNS[data-variant="_icon"].alt-with-arrows::before,
	.COLUMNS[data-variant="_icon"].alt-with-arrows::after {
		content: url(/_assets/be9c861b560e1421/arrow.svg);
		position: absolute;
		height: fit-content;
		height: 83rem;
		width: 23rem;
		left: 50%;
	}

	.COLUMNS[data-variant="_icon"].alt-with-arrows::before {
		transform: translate(-50%, -100%);
		top: -20rem;
	}
	.COLUMNS[data-variant="_icon"].alt-with-arrows::after {
		transform: translate(-50%, 100%);
		bottom: 0;
	}
	
	.COLUMNS[data-variant="_icon"].alt-with-arrows > .path,
	.COLUMNS[data-variant="_icon"].alt-with-arrows .b-column > .b-spacer,
	.COLUMNS[data-variant="_icon"].alt-with-arrows .b-column > .arrow { display: none; }
	.COLUMNS[data-variant="_icon"].alt-with-arrows .container {padding: 0; border-radius: 0;}
}




/* PLAYLIST EMBED */

.COLUMNS[data-variant="_playlist_embed"] .container {
	width: min(var(--col-7), 100%);
	margin: 0 auto;
	border-radius: 10rem;
	box-sizing: border-box;
	padding: 16rem;
	background: #303838;
}

.COLUMNS[data-variant="_playlist_embed"] .title > h5 { padding: 0 0 16rem; font-weight: 600; }
.COLUMNS[data-variant="_playlist_embed"] .title,
.COLUMNS[data-variant="_playlist_embed"] .row { position: relative; }
.COLUMNS[data-variant="_playlist_embed"] .title::after,
.COLUMNS[data-variant="_playlist_embed"] .row::after {
	content: '';
	position: absolute;
	bottom: 1rem;
	height: 1.5rem;
	left: 0;
	right: 0;
	background: hsla(0,0%,100%,.1);
}