/* Title */
[class*="title--"] {
	letter-spacing: var(--letter-spacing);
}

.title--xl {
	font-size: var(--s-120);
	line-height: 0.96;
}

.title--xl > .mask,
.title--xl .line {
	margin-bottom: calc(0px - var(--s-06));
}

.title--xl > .mask > span,
.title--xl .line > span {
	padding-bottom: var(--s-06);
}

.title--l {
	font-size: var(--s-80);
	line-height: 0.96;
}

.title--l > .mask,
.title--l .line {
	margin-bottom: calc(0px - var(--s-04));
}

.title--l > .mask > span,
.title--l .line > span {
	padding-bottom: var(--s-04);
}

.title--m {
	font-size: var(--s-56);
	line-height: 0.96;
}

.title--m > .mask,
.title--m .line {
	margin-bottom: calc(0px - var(--s-02));
}
	
.title--m > .mask > span,
.title--m .line > span {
	padding-bottom: var(--s-02);
}

.title--s {
	font-size: var(--s-40);
	line-height: 1;
}

.title--s > .mask,
.title--s .line {
	margin-bottom: calc(0px - var(--s-02));
}
	
.title--s > .mask > span,
.title--s .line > span {
	padding-bottom: var(--s-02);
}


@media (max-width: 980px) and (min-width: 681px) and (orientation: portrait) {
	
	.title--xl {
		font-size: var(--s-96);
		line-height: 0.96;
	}
	
	.title--l {
		font-size: var(--s-64);
		line-height: 1;
	}
	
	.title--m {
		font-size: var(--s-48);
		line-height: 1;
	}
	
	.title--s {
		font-size: var(--s-32);
		line-height: 1.15;
	}
	
}

@media (max-width: 680px) {
	
	.title--xl {
		font-size: var(--s-48);
		line-height: 1;
	}
	
	.title--l {
		font-size: var(--s-48);
		line-height: 1;
	}
	
	.title--m {
		font-size: var(--s-32);
		line-height: 1.15;
	}
	
	.title--s {
		font-size: var(--s-24);
		line-height: 1.2;
	}
	
}


/* Body */

.text--xl {
	font-size: clamp(1.25rem, var(--s-24), 2rem);
	line-height: 1.2;
}

.text--l {
	font-size: clamp(1.111rem, var(--s-22), 1.75rem);
	line-height: 1.25;
}

.text--m {
	font-size: clamp(1rem, var(--s-18), 1.5rem);
	line-height: 1.25;
}

.text--s {
	font-size: clamp(0.75rem, var(--s-14), 1.125rem);
	line-height: 1.285;
}

.text--xs {
	font-size: clamp(0.5rem, var(--s-12), 1rem);
	line-height: 1.5;
}

.text__description {
	box-sizing: border-box;
}


@media (max-width: 980px) {
	
	.text--xl {
		font-size: clamp(1.125rem, var(--s-20), 1.5rem);
		line-height: 1.25;
	}
	
	.text--l {
		font-size: clamp(1rem, var(--s-18), 1.5rem);
		line-height: 1.25;
	}
	
	.text--m {
		font-size: clamp(0.875rem, var(--s-16), 1.25rem);
		line-height: 1.25;
	}
	
}