html {
	font-size: 62.5%;
}
:root {
	--primary: hsl(188, 100%, 39%);
	--primary-5: hsla(188, 100%, 39%, 0.05);
	--primary-10: hsla(188, 100%, 39%, 0.1);
	--primary-20: hsla(188, 100%, 39%, 0.2);
	--primary-30: hsla(188, 100%, 39%, 0.3);
	--primary-40: hsla(188, 100%, 39%, 0.4);
	--primary-50: hsla(188, 100%, 39%, 0.5);
	--primary-60: hsla(188, 100%, 39%, 0.6);
	--primary-70: hsla(188, 100%, 39%, 0.7);
	--primary-80: hsla(188, 100%, 39%, 0.8);
	--primary-90: hsla(188, 100%, 39%, 0.9);
	--primary-d-1: hsl(189, 73%, 35%);
	--primary-d-2: hsl(190, 60%, 28%);
	--primary-d-3: hsl(191, 48%, 20%);
	--primary-d-4: hsl(192, 34%, 12%);
	--primary-l-1: hsl(191, 56%, 60%);
	--primary-l-2: hsl(192, 55%, 71%);
	--primary-l-3: hsl(192, 54%, 81%);
	--primary-l-4: hsl(192, 53%, 91%);
	--bg-body: hsla(0, 0%, 92%, 1);
	--bg-surface: hsla(0, 0%, 100%, 1);
	--text-body: hsla(0, 0%, 25%, 1);
	--text-title: hsla(0, 0%, 0%, 1);
	--border-primary: hsla(0, 0%, 50%, 0.25);
	--shadow-primary: hsla(0, 0%, 0%, 0.15);
	--light: hsl(85, 0%, 100%);
	--dark: hsla(0, 0%, 0%, 1);
	--space-4xs: clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem);
	--space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
	--space-2xs: clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem);
	--space-xs: clamp(1.02rem, calc(0.35vw + 0.91rem), 1.4rem);
	--space-s: clamp(1.28rem, calc(0.65vw + 1.07rem), 1.98rem);
	--space-m: clamp(1.6rem, calc(1.11vw + 1.24rem), 2.8rem);
	--space-l: clamp(2rem, calc(1.81vw + 1.42rem), 3.96rem);
	--space-xl: clamp(2.5rem, calc(2.87vw + 1.58rem), 5.6rem);
	--space-2xl: clamp(3.13rem, calc(4.44vw + 1.71rem), 7.92rem);
	--space-3xl: clamp(3.91rem, calc(6.75vw + 1.75rem), 11.19rem);
	--space-4xl: clamp(4.88rem, calc(10.13vw + 1.64rem), 15.83rem);
	--text-xs: clamp(1.11rem, calc(-0.09vw + 1.13rem), 1.01rem);
	--text-s: clamp(1.24rem, calc(0.1vw + 1.21rem), 1.35rem);
	--text-m: clamp(1.4rem, calc(0.37vw + 1.28rem), 1.8rem);
	--text-l: clamp(1.57rem, calc(0.76vw + 1.33rem), 2.4rem);
	--text-xl: clamp(1.77rem, calc(1.32vw + 1.35rem), 3.2rem);
	--text-2xl: clamp(1.99rem, calc(2.1vw + 1.32rem), 4.26rem);
	--text-3xl: clamp(2.24rem, calc(3.19vw + 1.22rem), 5.68rem);
	--text-4xl: clamp(2.52rem, calc(4.68vw + 1.03rem), 7.58rem);
	--columns-1: repeat(1, minmax(0, 1fr));
	--columns-2: repeat(2, minmax(0, 1fr));
	--columns-3: repeat(3, minmax(0, 1fr));
	--columns-4: repeat(4, minmax(0, 1fr));
	--columns-5: repeat(5, minmax(0, 1fr));
	--columns-6: repeat(6, minmax(0, 1fr));
	--columns-7: repeat(7, minmax(0, 1fr));
	--columns-8: repeat(8, minmax(0, 1fr));
	--columns-9: repeat(9, minmax(0, 1fr));
	--columns-10: repeat(10, minmax(0, 1fr));
	--columns-11: repeat(11, minmax(0, 1fr));
	--columns-12: repeat(12, minmax(0, 1fr));
	--radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
	--radius-s: clamp(0.6rem, calc(-0.19vw + 0.86rem), 0.8rem);
	--radius-m: clamp(1rem, calc(-0.19vw + 1.26rem), 1.2rem);
	--radius-l: clamp(1.6rem, calc(-0.37vw + 2.12rem), 2rem);
	--radius-xl: clamp(2.6rem, calc(-0.56vw + 3.38rem), 3.2rem);
	--radius-full: 999rem;
	--shadow-xs: 0 1px 2px var(--shadow-primary);
	--shadow-s: 0 1.5px 3px var(--shadow-primary);
	--shadow-m: 0 2px 6px var(--shadow-primary);
	--shadow-l: 0 3px 12px var(--shadow-primary);
	--shadow-xl: 0 6px 48px var(--shadow-primary);
}
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3xs);
	padding: var(--space-xs) var(--space-s);
	background: var(--primary);
	color: #fff;
	font-size: var(--text-m);
	font-weight: 600;
	border-radius: var(--radius-m);
	border: 0px solid var(--primary-d-1);
	box-shadow: 0;
	transition: all 0.25s ease-in-out;
	outline: 0;
	cursor: pointer;
	white-space: nowrap;
}
.btn:hover {
	background: var(--primary-d-1);
	transform: translateY(-0.1rem);
}
.btn.small {
	font-size: var(--text-s);
	padding: var(--space-xs) var(--space-s);
}
.btn.large {
	font-size: var(--text-l);
	padding: var(--space-s) var(--space-m);
}
.btn.tertiary {
	background: var(--tertiary);
	border-color: var(--tertiary-d-1);
}
.btn.ghost {
	color: var(--dark-80);
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}
.btn.slight {
	color: var(--dark-80);
	background: var(--bg-surface);
	border-color: var(--border-primary);
	box-shadow: var(--shadow-s);
}
.btn.secondary {
	background: var(--secondary);
	border-color: var(--secondary-d-1);
}
.btn.ghost:hover {
	background: var(--dark-10);
}
.btn.slight:hover {
	background: var(--dark-5);
}
.btn.tertiary:hover {
	background: var(--tertiary-d-1);
}
.btn.secondary:hover {
	background: var(--secondary-d-1);
}
.btn:focus {
	outline: 4px solid var(--primary-l-3);
	outline-offset: 2px;
}
.btn.no-bg {
	color: var(--dark-80);
	background: transparent;
	box-shadow: none;
	border-color: transparent;
}
.btn.no-bg:hover {
	color: var(--dark);
}
.badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4xs);
	padding: var(--space-2xs) var(--space-s);
	background: var(--dark-10);
	color: var(--primary);
	font-size: var(--text-s);
	font-weight: 500;
	border-radius: var(--radius-full);
	border: 0;
	outline: 0;
}
.badge.secondary {
	color: var(--secondary);
}
.link {
	color: var(--primary);
	font-size: var(--text-m);
	font-weight: 600;
	letter-spacing: 0.05rem;
	box-shadow: 0 2px 0 var(--primary-20);
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all 0.15s ease-in-out;
}
.link:hover {
	box-shadow: 0 2px 0 var(--primary-40);
}
.link:focus {
	background: var(--primary-10);
}
.link.secondary {
	color: var(--secondary);
	border-color: var(--secondary-20);
}
.link.tertiary {
	color: var(--tertiary);
	border-color: var(--tertiary-20);
}
.input {
	padding: var(--space-xs) var(--space-s);
	background: var(--light);
	color: var(--text-title);
	font-size: var(--text-m);
	font-weight: 500;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-primary);
	transition: all 0.25s ease-in-out;
	appearance: none;
	outline: 0;
	width: 100%;
}
.input:focus {
	background: var(--primary-20);
	border-color: var(--primary);
}
.input:hover {
	border-color: var(--primary);
	background: transparent;
}
.input::placeholder {
	color: var(--dark-40);
}
.input:invalid {
	border-color: var(--error);
	background: var(--error-10);
}
.input:disabled {
	cursor: not-allowed;
	opacity: .75;
	box-shadow: none;
	background: var(--dark-10);
}
.select {
	padding: var(--space-xs) var(--space-s);
	background: var(--light);
	color: var(--text-body);
	font-size: var(--text-m);
	font-weight: 500;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-primary);
	transition: all 0.25s ease-in-out;
	outline: 0;
	width: 100%;
}
.select:focus {
	background: var(--primary-20);
	border-color: var(--primary);
}
.select:hover {
	border-color: var(--primary);
}
.select::placeholder {
	color: var(--dark-40);
}
.select:invalid {
	border-color: var(--error);
	background: var(--error-10);
}
.select:disabled {
	cursor: not-allowed;
	opacity: .75;
	box-shadow: none;
	background: var(--dark-10);
}
.card {
	display: grid;
	gap: var(--space-xs);
	padding: var(--space-m);
	font-size: var(--text-m);
	color: var(--text-body);
	background: var(--bg-surface);
	line-height: 1.3;
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-m);
}
.card.secondary {
	background: var(--secondary);
	color: #fff;
}
.card.primary {
	background: var(--primary);
	color: #fff;
}
.icon {
	color: var(--primary);
	width: var(--space-2xl);
	height: auto;
	font-size: var(--space-2xl);
}
.icon.large {
	width: var(--space-3xl);
	font-size: var(--space-3xl);
}
.icon.secondary {
	color: var(--secondary);
}
.icon.tertiary {
	color: var(--tertiary);
}
.icon.outline {
	padding: 0.5em;
	border: 1px solid var(--border-primary);
	border-radius: 100%;
	box-sizing: content-box;
}
.icon.filled {
	padding: 0.5em;
	border-radius: 100%;
	box-sizing: content-box;
	background: var(--dark-10);
}
.icon.small {
	width: var(--space-l);
	font-size: var(--space-l);
}
.avatar {
	width: var(--space-2xl);
	height: var(--space-2xl);
	border-radius: 100%;
	box-shadow: var(--shadow-m);
	object-fit: cover;
}
.avatar.small {
	width: var(--space-l);
	height: var(--space-l);
}
.avatar.large {
	width: var(--space-4xl);
	height: var(--space-4xl);
}
.divider {
	min-width: 100%;
	width: 100%;
	max-width: 100%;
	min-height: 1px;
	height: 1px;
	max-height: 1px;
	background: var(--border-primary);
	margin: var(--space-m) 0;
	border: 0;
}
.divider.vertical {
	min-width: 1px;
	width: 1px;
	max-width: 1px;
	min-height: 100%;
	height: 100%;
	max-height: 100%;
}
.checkbox {
	appearance: none;
	display: grid;
	place-content: center;
	border: 2px solid var(--dark-40);
	border-radius: var(--radius-s);
	width: clamp(1.8rem, calc(-0.37vw + 2.32rem), 2.2rem);
	height: clamp(1.8rem, calc(-0.37vw + 2.32rem), 2.2rem);
}
.checkbox:checked:before {
	transform: scale(1);
}
.checkbox::before {
	content: "";
	width: 1em;
	height: 1em;
	box-shadow: inset 1em 1em #fff;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	transform: scale(0);
	transition: transform 0.2s;
}
.checkbox:hover {
	border-color: var(--primary);
}
.checkbox:focus {
	outline: 3px solid var(--primary-l-3);
	outline-offset: 2px;
}
.checkbox:checked {
	background: var(--primary);
	border-color: var(--primary);
}
.radio {
	appearance: none;
	display: grid;
	place-content: center;
	border: 2px solid var(--dark-40);
	border-radius: var(--radius-full);
	width: clamp(1.8rem, calc(-0.37vw + 2.32rem), 2.2rem);
	height: clamp(1.8rem, calc(-0.37vw + 2.32rem), 2.2rem);
}
.radio:checked:before {
	transform: scale(1);
}
.radio::before {
	content: "";
	width: 1em;
	height: 1em;
	border-radius: 100%;
	transform: scale(0);
	transition: transform 0.2s;
	background: var(--primary);
}
.radio:hover {
	border-color: var(--primary);
}
.radio:focus {
	outline: 3px solid var(--primary-l-3);
	outline-offset: 2px;
}
.radio:checked {
	border-color: var(--primary);
}
.bg-primary {
	background-color: var(--primary);
}
.bg-primary-5 {
	background-color: var(--primary-5);
}
.bg-primary-10 {
	background-color: var(--primary-10);
}
.bg-primary-20 {
	background-color: var(--primary-20);
}
.bg-primary-30 {
	background-color: var(--primary-30);
}
.bg-primary-40 {
	background-color: var(--primary-40);
}
.bg-primary-50 {
	background-color: var(--primary-50);
}
.bg-primary-60 {
	background-color: var(--primary-60);
}
.bg-primary-70 {
	background-color: var(--primary-70);
}
.bg-primary-80 {
	background-color: var(--primary-80);
}
.bg-primary-90 {
	background-color: var(--primary-90);
}
.bg-primary-d-1 {
	background-color: var(--primary-d-1);
}
.bg-primary-d-2 {
	background-color: var(--primary-d-2);
}
.bg-primary-d-3 {
	background-color: var(--primary-d-3);
}
.bg-primary-d-4 {
	background-color: var(--primary-d-4);
}
.bg-primary-l-1 {
	background-color: var(--primary-l-1);
}
.bg-primary-l-2 {
	background-color: var(--primary-l-2);
}
.bg-primary-l-3 {
	background-color: var(--primary-l-3);
}
.bg-primary-l-4 {
	background-color: var(--primary-l-4);
}
.text-primary {
	color: var(--primary);
}
.text-primary-5 {
	color: var(--primary-5);
}
.text-primary-10 {
	color: var(--primary-10);
}
.text-primary-20 {
	color: var(--primary-20);
}
.text-primary-30 {
	color: var(--primary-30);
}
.text-primary-40 {
	color: var(--primary-40);
}
.text-primary-50 {
	color: var(--primary-50);
}
.text-primary-60 {
	color: var(--primary-60);
}
.text-primary-70 {
	color: var(--primary-70);
}
.text-primary-80 {
	color: var(--primary-80);
}
.text-primary-90 {
	color: var(--primary-90);
}
.text-primary-d-1 {
	color: var(--primary-d-1);
}
.text-primary-d-2 {
	color: var(--primary-d-2);
}
.text-primary-d-3 {
	color: var(--primary-d-3);
}
.text-primary-d-4 {
	color: var(--primary-d-4);
}
.text-primary-l-1 {
	color: var(--primary-l-1);
}
.text-primary-l-2 {
	color: var(--primary-l-2);
}
.text-primary-l-3 {
	color: var(--primary-l-3);
}
.text-primary-l-4 {
	color: var(--primary-l-4);
}
.border-primary {
	border-color: var(--primary);
}
.border-primary-5 {
	border-color: var(--primary-5);
}
.border-primary-10 {
	border-color: var(--primary-10);
}
.border-primary-20 {
	border-color: var(--primary-20);
}
.border-primary-30 {
	border-color: var(--primary-30);
}
.border-primary-40 {
	border-color: var(--primary-40);
}
.border-primary-50 {
	border-color: var(--primary-50);
}
.border-primary-60 {
	border-color: var(--primary-60);
}
.border-primary-70 {
	border-color: var(--primary-70);
}
.border-primary-80 {
	border-color: var(--primary-80);
}
.border-primary-90 {
	border-color: var(--primary-90);
}
.border-primary-d-1 {
	border-color: var(--primary-d-1);
}
.border-primary-d-2 {
	border-color: var(--primary-d-2);
}
.border-primary-d-3 {
	border-color: var(--primary-d-3);
}
.border-primary-d-4 {
	border-color: var(--primary-d-4);
}
.border-primary-l-1 {
	border-color: var(--primary-l-1);
}
.border-primary-l-2 {
	border-color: var(--primary-l-2);
}
.border-primary-l-3 {
	border-color: var(--primary-l-3);
}
.border-primary-l-4 {
	border-color: var(--primary-l-4);
}
.text-light {
	color: var(--light);
}
.text-xs {
	font-size: 1.11rem;
	font-size: var(--text-xs);
}
.text-s {
	font-size: 1.24rem;
	font-size: var(--text-s);
}
.text-m {
	font-size: 1.4rem;
	font-size: var(--text-m);
}
.text-l {
	font-size: 1.57rem;
	font-size: var(--text-l);
}
.text-xl {
	font-size: 1.77rem;
	font-size: var(--text-xl);
}
.text-2xl {
	font-size: 1.99rem;
	font-size: var(--text-2xl);
}
.text-3xl {
	font-size: 2.24rem;
	font-size: var(--text-3xl);
}
.text-4xl {
	font-size: 2.52rem;
	font-size: var(--text-4xl);
}
H1 {
	font-size: var(--text-4xl);
	line-height: 1.1;
}
H2 {
	font-size: var(--text-3xl);
	line-height: 1.2;
}
H3 {
	font-size: var(--text-2xl);
	line-height: 1.3;
}
H4 {
	font-size: var(--text-xl);
	line-height: 1.3;
}
H5 {
	font-size: var(--text-l);
	line-height: 1.3;
}
H6 {
	font-size: var(--text-m);
	line-height: 1.4;
}
.row {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
}
.column {
	display: grid;
	grid-auto-flow: row;
	justify-items: start;
	align-content: start;
}
.columns-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.columns-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.columns-4 {
	display: grid;
	grid-template-columns: repeat(4,1fr);
}
.columns-5 {
	display: grid;
	grid-template-columns: repeat(5,1fr);
}
.columns-6 {
	display: grid;
	grid-template-columns: repeat(6,1fr);
}
.columns-7 {
	display: grid;
	grid-template-columns: repeat(7,1fr);
}
.columns-8 {
	display: grid;
	grid-template-columns: repeat(8,1fr);
}
.columns-min-5 {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(5rem, 1fr));
}
.columns-min-10 {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(10rem, 1fr));
}
.columns-min-20 {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(20rem, 1fr));
}
.columns-min-30 {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(30rem, 1fr));
}
.columns-min-40 {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(40rem, 1fr));
}
.columns-min-50 {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(50rem, 1fr));
}
.columns-min-60 {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(60rem, 1fr));
}
.columns-min-70 {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(70rem, 1fr));
}
.flex-row {
	display: flex;
	flex-direction: row;
}
.flex-column {
	display: flex;
	flex-direction: column;
}
.flex-1 {
	flex: 1;
}
.flex-2 {
	flex: 2;
}
.flex-3 {
	flex: 3;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-nowrap {
	flex-wrap: nowrap;
}
.radius-xs {
	border-radius: var(--radius-xs);
}
.radius-s {
	border-radius: var(--radius-s);
}
.radius-m {
	border-radius: var(--radius-m);
}
.radius-l {
	border-radius: var(--radius-l);
}
.radius-xl {
	border-radius: var(--radius-xl);
}
.radius-full {
	border-radius: var(--radius-full);
}
@media (max-width: 1400px) {
	.column--on-xl {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
	}
	.row--on-xl {
		grid-template-columns: unset;
		grid-auto-flow: column;
	}
	.columns-2--on-xl {
		grid-template-columns: repeat(2, 1fr);
	}
	.columns-3--on-xl {
		grid-template-columns: repeat(3, 1fr);
	}
	.columns-4--on-xl {
		grid-template-columns: repeat(4, 1fr);
	}
	.columns-5--on-xl {
		grid-template-columns: repeat(5, 1fr);
	}
	.columns-6--on-xl {
		grid-template-columns: repeat(6, 1fr);
	}
}
@media (max-width: 992px) {
	.column--on-l {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
	}
	.row--on-l {
		grid-template-columns: unset;
		grid-auto-flow: column;
	}
	.columns-2--on-l {
		grid-template-columns: repeat(2, 1fr);
	}
	.columns-3--on-l {
		grid-template-columns: repeat(3, 1fr);
	}
	.columns-4--on-l {
		grid-template-columns: repeat(4, 1fr);
	}
	.columns-5--on-l {
		grid-template-columns: repeat(5, 1fr);
	}
	.columns-6--on-l {
		grid-template-columns: repeat(6, 1fr);
	}
}
@media (max-width: 768px) {
	.column--on-m {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
	}
	.row--on-m {
		grid-template-columns: unset;
		grid-auto-flow: column;
	}
	.columns-2--on-m {
		grid-template-columns: repeat(2, 1fr);
	}
	.columns-3--on-m {
		grid-template-columns: repeat(3, 1fr);
	}
	.columns-4--on-m {
		grid-template-columns: repeat(4, 1fr);
	}
	.columns-5--on-m {
		grid-template-columns: repeat(5, 1fr);
	}
	.columns-6--on-m {
		grid-template-columns: repeat(6, 1fr);
	}
}
@media (max-width: 480px) {
	.column--on-s {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
	}
	.row--on-s {
		grid-template-columns: 1fr;
		grid-auto-flow: column;
	}
	.columns-2--on-s {
		grid-template-columns: repeat(2, 1fr);
	}
	.columns-3--on-s {
		grid-template-columns: repeat(3, 1fr);
	}
	.columns-4--on-s {
		grid-template-columns: repeat(4, 1fr);
	}
	.columns-5--on-s {
		grid-template-columns: repeat(5, 1fr);
	}
	.columns-6--on-s {
		grid-template-columns: repeat(6, 1fr);
	}
}