:root {
	--finch-radius: var(--r-24);
	--finch-box-shadow: inset 0px 20px 30px 0px rgba(0,0,0,0.1), 0px 8px 120px 0px rgba(0,31,168,0.1), 0px 5px 75px 0px rgba(0,31,168,0.3), 0px 0px 80px 0px rgba(126,80,235,0.25), 0px 0px 120px 0px rgba(6,82,221,0.2);
	--finch-gradient: linear-gradient(-117.456deg, #EB1560 0%, #F9246F 5%, #C52991 20%, #AA2BA3 32%, #9034B4 45%, #753EC5 57%, #6846CE 64%, #5A4ED7 70%, #5050D9 74%, #4651DC 80%, #3354E1 86%, #0B5AEB 95%, #0650DB 100%);
	--finch-gradient-min: linear-gradient(45deg, #0066FF 0%, #6A5BFF 50%, #F9246F 100%);
}

.finch-bg-gradient-min {
	background: var(--finch-gradient-min);
}

.finch-color-rack-item {
	border-radius: var(--r-4);
	font-size: var(--base-12);
	line-height: var(--base-18);
    font-weight: 500;
    font-family: var(--heading);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex: 1;
	width: 100%;
}

.finch-box-shadow {
	box-shadow: var(--finch-box-shadow);
}

.finch-bg-blue-50 { background-color: #E8EAFB; } 
.finch-bg-blue-100 { background-color: #C5CCF4; } 
.finch-bg-blue-200 { background-color: #9BA9EE; } 
.finch-bg-blue-300 { background-color: #6E88E8; } 
.finch-bg-blue-400 { background-color: #4B70E0; } 
.finch-bg-blue-500 { background-color: #0652DD; } 
.finch-bg-blue-600 { background-color: #0B4ECF; } 
.finch-bg-blue-700 { background-color: #003EC6; } 
.finch-bg-blue-800 { background-color: #0033BA; } 
.finch-bg-blue-900 { background-color: #001FA8; } 
.finch-bg-magenta-50 { background-color: #FEE3EA; } 
.finch-bg-magenta-100 { background-color: #FCBACB; } 
.finch-bg-magenta-200 { background-color: #F98CA8; } 
.finch-bg-magenta-300 { background-color: #F65D86; } 
.finch-bg-magenta-400 { background-color: #F2396C; } 
.finch-bg-magenta-500 { background-color: #ED0D53; } 
.finch-bg-magenta-600 { background-color: #DD0651; } 
.finch-bg-magenta-700 { background-color: #C8004E; } 
.finch-bg-magenta-800 { background-color: #B4004B; } 
.finch-bg-magenta-900 { background-color: #900046; } 
.finch-bg-yellow-50 { background-color: #FFFDE9; } 
.finch-bg-yellow-100 { background-color: #FFF9C9; } 
.finch-bg-yellow-200 { background-color: #FFF4A7; } 
.finch-bg-yellow-300 { background-color: #FFF085; } 
.finch-bg-yellow-400 { background-color: #FDEC6B; } 
.finch-bg-yellow-500 { background-color: #FBE750; } 
.finch-bg-yellow-600 { background-color: #FCD84E; } 
.finch-bg-yellow-700 { background-color: #F8C146; } 
.finch-bg-yellow-800 { background-color: #F5AA3D; } 
.finch-bg-yellow-900 { background-color: #EF832E; } 
.finch-bg-teal-50 { background-color: #E1F2F1; } 
.finch-bg-teal-100 { background-color: #B4E0DC; } 
.finch-bg-teal-200 { background-color: #84CDC5; } 
.finch-bg-teal-300 { background-color: #53B8AE; } 
.finch-bg-teal-400 { background-color: #32A99C; } 
.finch-bg-teal-500 { background-color: #1B998B; } 
.finch-bg-teal-600 { background-color: #188C7D; } 
.finch-bg-teal-700 { background-color: #157C6D; } 
.finch-bg-teal-800 { background-color: #136C5E; } 
.finch-bg-teal-900 { background-color: #0E4F42; } 

.finch-bg-gradient {
	background: var(--finch-gradient);
}

.finch-block {
	position: relative;
	padding: 0 var(--base-24);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

}
.finch-block-label {
	font-weight: 350;
	color: var(--white);
	z-index: 10;
	/* font-size: var(--base-14);
	line-height: var(--base-16); */
}

.finch-block::after {
	display: block;
}

.finch-mind-map-grid::after,
.finch-block::after {
	content: '';
    backdrop-filter: blur(16px);
    border-radius: var(--r-12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 5%) 0%, rgba(255, 255, 255, 10%) 10%, rgba(255, 255, 255, 15%) 25%, rgba(255, 255, 255, 30%) 60%, rgba(255, 255, 255, 40%) 75%, rgba(255, 255, 255, 50%) 100%);
	border-top: 0.5px solid rgba(255, 255, 255, 20%);
	border-bottom: 0.5px solid rgba(0, 0, 0, 20%);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	mix-blend-mode: soft-light;
}

.finch-mind-map-grid::after {
	display: none;
}

.finch-block-pressed::after {
	box-shadow: inset 0px 0px 10px 0px rgba(0,31,168,0.1), 0px 0px 20px 0px rgba(0,31,168,0.05), 0px 5px 65px 0px rgba(0,31,168,0.1), 0px 0px 30px 0px rgba(237,13,83,0.1);
	background: linear-gradient(180deg, rgba(232, 234, 251, 25%) 0%, rgba(232, 234, 251, 20%) 10%, rgba(232, 234, 251, 15%) 35%, rgba(0, 0, 0, 3%) 60%, rgba(0, 0, 0, 10%) 75%, rgba(0, 0, 0, 15%) 100%);
	border-top: 0.5px solid rgba(0, 0, 0, 10%);
	border-bottom: 0.5px solid rgba(255, 255, 255, 10%);
}

.finch-mind-map-grid > .flex-column {
	position: relative;
}

.finch-mind-map-grid > .flex-column:not(:last-child)::after {
	content: '';
    position: absolute;
    top: 50%;
    right: -1.2rem;
    background: #fff;
    height: 2px;
    width: 2px;
    border-radius: 50%;
    mix-blend-mode: soft-light;
}

.finch-mind-map-grid .sm-finch-block {
	align-items: center;
}

@media screen and (min-width: 960px) {
	/* .lg-finch-mind-map-grid::after {
		display: none;
	} */
	.finch-block-label {
		font-size: var(--base-14);
		line-height: 1.2
	}
}

@media screen and (min-width: 640px) {
    :root {
        --finch-radius: var(--r-24);
	}
}

@media screen and (max-width: 639px) {
    :root {
        --finch-radius: var(--r-16);
	}

	.finch-block-label {
		font-size: var(--base-12);
	}

	.sm-finch-mind-map-grid {
		padding-top: var(--base-16);
		padding-bottom: var(--base-16);
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

	.finch-mind-map-grid.sm-finch-mind-map-grid::after {
		display: block;
	}

	.finch-mind-map-grid .sm-finch-block {
		align-items: flex-start;
	}

	.finch-mind-map-grid .sm-finch-block::after {
		background: unset;
		border: none;
		box-shadow: unset;
	}

	.finch-mind-map-grid > .flex-column:not(:last-child)::after {
		display: none;
	}
}