/*
* === FLUID SIZES ===
*/
:root {
	--rem-val: 16;
}
/* Group 0: 480px - 1200px */
:root {
	--h1: 32px;
	--h2: 27px;
	--h3: 23px;
	--h4: 20px;
	--h5: 16px;
	--h6: 15px;
	--p: 16px;
	--pixel-60-45: 45px;
	--pixel-45-38: 38px;
}
@media screen and (min-width: 480px) {
	:root {
		--h1: calc(32px + ((100vw - 480px) / (1200 - 480)) * (36 - 32) );
		--h2: calc(27px + ((100vw - 480px) / (1200 - 480)) * (30 - 27) );
		--h3: calc(23px + ((100vw - 480px) / (1200 - 480)) * (24 - 23) );
		--h4: calc(20px + ((100vw - 480px) / (1200 - 480)) * (22 - 20) );
		--h5: calc(16px + ((100vw - 480px) / (1200 - 480)) * (18 - 16) );
		--h6: calc(15px + ((100vw - 480px) / (1200 - 480)) * (16 - 15) );
		--p: calc(16px + ((100vw - 480px) / (1200 - 480)) * (16 - 16) );
		--pixel-60-45: calc(45px + ((100vw - 480px) / (1200 - 480)) * (60 - 45) );
		--pixel-45-38: calc(38px + ((100vw - 480px) / (1200 - 480)) * (45 - 38) );
	}
}
@media screen and (min-width: 1200px) {
	:root {
		--h1: 36px;
		--h2: 30px;
		--h3: 24px;
		--h4: 22px;
		--h5: 18px;
		--h6: 16px;
		--p: 16px;
		--pixel-60-45: 60px;
		--pixel-45-38: 45px;
	}
}
