.sft-display-1 {
	font-family: 'Barlow';
	font-weight: 400;
	color: var(--sft-transparent-black-0093);

	font-size: 2.1975rem;
}

.sft-display-2 {
	font-family: 'Barlow';
	font-weight: 400;
	color: var(--sft-transparent-black-0093);

	font-size: 1.758125rem;
}

.sft-display-3 {
	font-family: 'Barlow';
	font-weight: 400;
	color: var(--sft-transparent-black-0093);

	font-size: 1.40625rem;	
}

.sft-display-4 {
	font-family: 'Barlow';
	font-weight: 400;
	color: var(--sft-transparent-black-0093);

	font-size: 1.125rem;
}



/* 
# Hard scale display headings

		Display level 1

			44.25 / 16 = 2.765625 rem;


		Display level 2

			

			33.18 / 16 = 2.07375rem


		Display level 3

			

			24.89 / 16 = 1.555625rem


		Display level 4

			1.166666 rem

			16 x 1.166666 = 18.6666



			18.67 / 16 = 1.166875rem



			.3333333 / 2 = 0.16666665

*/

/* 
	Note: I think it makes sense to move away from the idea of "hard scale."
	So, the following code will have the --hard-scale modifier removed. And we'll just be left with one sizing 
	for display types. That means, the code at the top of the page will be overwritten by the following code. 

*/

/* 
# Hard scale form for display headings */

.sft-display-1 {
	font-size: 2.765625rem;

	font-family: 'Barlow';
	font-weight: 400;
	color: var(--sft-transparent-black-0093);
}

.sft-display-2 {
	font-size: 2.07375rem;

	font-family: 'Barlow';
	font-weight: 400;
	color: var(--sft-transparent-black-0093);
}

.sft-display-3 {
	font-size: 1.555625rem;

	font-family: 'Barlow';
	font-weight: 400;
	color: var(--sft-transparent-black-0093);
}

.sft-display-4 {
	font-size: 1.166666rem;

	font-family: 'Barlow';
	font-weight: 400;
	color: var(--sft-transparent-black-0093);
}