:root {
	--color-mint_01: #EBF5F4;
	--color-mint_02: #AFDFDC;
	--color-mint_03: #0DB7AD;
	--color-mint_04: #149189;
	--color-mint_05: #03636A;

	--color-coral_01: #FFEFEF;
	--color-coral_02: #FFC0C0;
	--color-coral_03: #e05656;
	--color-coral_04: #DC3C3C;
	--color-coral_05: #C12323;

	--color-blue_02: #CBE3F2;
	--color-blue_03: #3B89B9;
	--color-blue_04: #136ba1;

	--color-green_02: #DCF1EA;
	--color-green_03: #00A96E;
	--color-green_04: #0E855B;

	--color-purple_02: #EEEBF4;
	--color-purple_03: #8f70c3;
	--color-purple_04: #745aa0;

	--color-pink_02: #e7cbe3;
	--color-pink_03: #d061bd;
	--color-pink_04: #b43fa1;

	--color-yellow_03: #dfd000;

	--color-gray_00: #F9FAFA;
	--color-gray_01: #F0F1F3;
	--color-gray_02: #E8EAED;
	--color-gray_03: #DADCDF;
	--color-gray_04: #C6CAD1;
	--color-gray_05: #B0B6C0;
	--color-gray_06: #9499a0;
	--color-gray_07: #7a808a;
	--color-gray_08: #5d6168;
	--color-gray_09: #3f3f3f;
	--color-gray_10: #272727;
	--color-gray_11: #000000;


	--color-neon-green: #08D69E;
	--color-neon-blue: #00EBF4;

	--title-font_size-xxl: 3rem;
	--title-font_size-xl: 2.5rem;
	--title-font_size-l: 2rem;
	--title-font_size-m: 1.5rem;
	--title-font_size-s: 1.25rem;
	--title-font_size-xs: 1.125rem;

	--title-line_height-xxl: 3.75rem;
	--title-line_height-xl: 3.125rem;
	--title-line_height-l: 2.75rem;
	--title-line_height-m: 2rem;
	--title-line_height-s: 1.75rem;
	--title-line_height-xs: 1.8125rem;

	--body-font_size-xl: 1.375rem;
	--body-font_size-l: 1.25rem;
	--body-font_size-m: 1rem;
	--body-font_size-s: 0.875rem;
	--body-font_size-xs: 0.75rem;
}

.w-25p { width: 25% }
.w-75p { width: 75% }
.w-50p { width: 50% }

.font-mint {
	color: var(--color-mint_03);
}

.font-coral {
	color: var(--color-coral_03);
}

.font-blue {
	color: var(--color-blue_030);
}

.font-purple {
	color: var(--color-purple_03);
}

.font-green {
	color: var(--color-green_03);
}

.font-pink {
	color: var(--color-pink_03);
}

.font-yellow {
	color: var(--color-yellow_03);
}

.font-neon-green {
	color: var(--color-neon-green);
}

.font-neon-blue {
	color: var(--color-neon-blue);
}

.font-white {
	color: #fff;
}

.font-gray_03 {
	color: var(--color-gray_03);
}

.font-gray_04 {
	color: var(--color-gray_04);
}

.font-gray_05 {
	color: var(--color-gray_05);
}

.font-gray_06 {
	color: var(--color-gray_06);
}

.font-gray_07 {
	color: var(--color-gray_07);
}

.font-gray_08 {
	color: var(--color-gray_08);
}

.font-gray_09 {
	color: var(--color-gray_09);
}

/* title */
.title--xxl {
	font-size: var(--title-font_size-xxl);
	font-weight: 500;
	word-spacing: -1px;
	line-height: var(--title-line_height-xxl);
}

.title--xl {
	font-size: var(--title-font_size-xl);
	font-weight: 500;
	word-spacing: -1px;
	line-height: var(--title-line_height-xl);
}

.title--l {
	font-size: var(--title-font_size-l);
	font-weight: 500;
	word-spacing: -1px;
	line-height: var(--title-line_height-l);
}

.title--m {
	font-size: var(--title-font_size-m);
	font-weight: 500;
	line-height: var(--title-line_height-m);

}

.title--s {
	font-size: var(--title-font_size-s);
	font-weight: 500;
	line-height: var(--title-line_height-s);
}

.title--xs {
	font-size: var(--title-font_size-xs);
	font-weight: 500;
	line-height: var(--title-line_height-xs);
}

/* body */
.body--xl {
	font-size: var(--body-font_size-xl);
	line-height: 1.6125rem;

}

.body--l {
	font-size: var(--body-font_size-l);
	line-height: 1.75rem;
}

.body--m {
	font-size: var(--body-font_size-m);
	line-height: 1.5rem;
}

.body--s {
	font-size: var(--body-font_size-s);
	line-height: 1.25rem;
}

.body--xs {
	font-size: var(--body-font_size-xs)
}

.btn--mint {
	background: var(--color-mint_03);
	border: 1px solid var(--color-mint_03);
	color: white;
}

.btn--mint:hover {
	background: var(--color-mint_04);
	border: 1px solid var(--color-mint_04);
}

.btn--blue {
	background: var(--color-blue_03);
	border: 1px solid var(--color-blue_03);
	color: white;
}

.btn--blue:hover {
	background: var(--color-blue_04);
	border: 1px solid var(--color-blue_04);
}

.btn--green {
	background: var(--color-green_03);
	border: 1px solid var(--color-green_03);
	color: white;
}

.btn--green:hover {
	background: var(--color-green_04);
	border: 1px solid var(--color-green_04);
}

.btn--purple {
	background: var(--color-purple_03);
	border: 1px solid var(--color-purple_03);
	color: white;
}

.btn--purple:hover {
	background: var(--color-purple_04);
	border: 1px solid var(--color-purple_04);
}

.btn--pink {
	background: var(--color-pink_03);
	border: 1px solid var(--color-pink_03);
	color: white;
}

.btn--pink:hover {
	background: var(--color-pink_04);
	border: 1px solid var(--color-pink_04);
}

.btn--coral {
	background: var(--color-coral_03);
	border: 1px solid var(--color-coral_03);
	color: white;
}

.btn--coral:hover {
	background: var(--color-coral_04);
	border: 1px solid var(--color-coral_04);
}

.btn--gray {
	background: var(--color-gray_06);
	border: 1px solid var(--color-gray_06);
	color: white;
}

.btn--gray:hover {
	background: var(--color-gray_07);
	border: 1px solid var(--color-gray_07);
}

.btn_cont {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.5rem;
}

.btn_cont button {
	min-width: 80px;
}

.btn_cont.w-full button {
	flex: 1
}

.bg-tooltip {
	background: var(--color-mint_04);
}

@media (max-width: 840px) {
	:root {
		--title-font_size-xxl: 2rem;
		--title-font_size-xl: 1.5rem;
		--title-font_size-l: 1.1rem;
		--title-font_size-m: 0.99rem;
		--title-font_size-s: 0.91rem;
		--title-font_size-xs: 0.9rem;
	
		--title-line_height-xxl: 2.75rem;
		--title-line_height-xl: 2.125rem;
		--title-line_height-l: 1.75rem;
		--title-line_height-m: 1rem;
		--title-line_height-s: 1rem;
		--title-line_height-xs: 0.9rem;
	
		--body-font_size-xl: 0.9rem;
		--body-font_size-l: 0.85rem;
		--body-font_size-m: 0.8rem;
		--body-font_size-s : 0.799rem;
		--body-font_size-xs: 0.75rem;
	}
}