new-templane/resources/sass/base/_variables.scss

@import 'base/mixins';

:root {
	--container-width: 1400px;
	--transition: 0.3s ease;
	--default-font-family: 'Montserrat';
	--heading-font-family: 'Montserrat';

  --scrollbar-color:#F0F3F6;

	--text-color: rgba(2, 0, 5, 0.80); // text color
	--fz-default: 16px; // default font size
	--lh-default: 24px;// default line-height

	--h1: 44px; // h1 font size
	--h2: 24px; // h2 font size
	--h3: 20px; // h3 font size
	--h4: 18px; // h3 font size
	--l: 20px; // large font size
	--m: 16px; // medium font size
	--s: 14px; // small font size

	@include tablet {
		--container-width: 1199px;
		--fz-default: 16px; // default font size
		--lh-default: 26px;// default line-height
		--h1: 28px; // h1 font size
		--h2: 20px; // h2 font size
		--h3: 18px; // h3 font size
		--h4: 16px; // h3 font size
		--l: 20px; // large font size
		--m: 16px; // medium font size
		--s: 14px; // small font size
		--sp: 32px 0;
	}
	@include mobile{
		--container-width: 768px;
		--fz-default: 16px; // default font size
		--lh-default: 26px;// default line-height
		--h1: 28px; // h1 font size
		--h2: 20px; // h2 font size
		--h3: 18px; // h3 font size
		--h4: 16px; // h3 font size
		--l: 20px; // large font size
		--m: 16px; // medium font size
		--s: 14px; // small font size
		--sp: 32px 0;
	}
	@include mobile-sm {
		--container-width: 575px;
		--fz-default: 16px; // default font size
		--lh-default: 26px;// default line-height
		--h1: 24px; // h1 font size
		--h2: 18px; // h2 font size
		--h3: 16px; // h3 font size
		--h4: 14px; // h3 font size
		--l: 20px; // large font size
		--m: 16px; // medium font size
		--s: 14px; // small font size
	}
}