:root
{
	--space-small: 1vmax;
	--space-smaller: 2vmax;
	--space-normal: 3vmax;
	--space-larger: 4.2vmax;
	--space-large: 6vmax;
}

.mt-smaller	{ margin-top: var(--space-smaller); }
.mt-small	{ margin-top: var(--space-small); }
.mt			{ margin-top: var(--space-normal); }
.mt-larger	{ margin-top: var(--space-larger); }
.mt-large	{ margin-top: var(--space-large); }

.mb-smaller	{ margin-bottom: var(--space-smaller); }
.mb-small	{ margin-bottom: var(--space-small); }
.mb			{ margin-bottom: var(--space-normal); }
.mb-larger	{ margin-bottom: var(--space-larger); }
.mb-large	{ margin-bottom: var(--space-large); }

.ml-smaller	{ margin-left: var(--space-smaller); }
.ml-small	{ margin-left: var(--space-small); }
.ml			{ margin-left: var(--space-normal); }
.ml-larger	{ margin-left: var(--space-larger); }
.ml-large	{ margin-left: var(--space-large); }

.mr-smaller	{ margin-right: var(--space-smaller); }
.mr-small	{ margin-right: var(--space-small); }
.mr			{ margin-right: var(--space-normal); }
.mr-larger	{ margin-right: var(--space-larger); }
.mr-large	{ margin-right: var(--space-large); }




.my-smaller	{ margin-top: var(--space-smaller); margin-bottom: var(--space-smaller); }
.my-small	{ margin-top: var(--space-small);	margin-bottom: var(--space-small); }
.my			{ margin-top: var(--space-normal);	margin-bottom: var(--space-normal); }
.my-larger	{ margin-top: var(--space-larger);	margin-bottom: var(--space-larger); }
.my-large	{ margin-top: var(--space-large);	margin-bottom: var(--space-large);	}

.mx-smaller	{ margin-left: var(--space-smaller);margin-right: var(--space-smaller); }
.mx-small	{ margin-left: var(--space-small);	margin-right: var(--space-small); }
.mx			{ margin-left: var(--space-normal);	margin-right: var(--space-normal); }
.mx-larger	{ margin-left: var(--space-larger); margin-right: var(--space-larger); }
.mx-large	{ margin-left: var(--space-large);	margin-right: var(--space-large); }





.pt-smaller	{ padding-top: var(--space-smaller); }
.pt-small	{ padding-top: var(--space-small); }
.pt			{ padding-top: var(--space-normal); }
.pt-larger	{ padding-top: var(--space-larger); }
.pt-large	{ padding-top: var(--space-large); }

.pb-smaller	{ padding-bottom: var(--space-smaller); }
.pb-small	{ padding-bottom: var(--space-small); }
.pb			{ padding-bottom: var(--space-normal); }
.pb-larger	{ padding-bottom: var(--space-larger); }
.pb-large	{ padding-bottom: var(--space-large); }

.pl-smaller	{ padding-left: var(--space-smaller); }
.pl-small	{ padding-left: var(--space-small); }
.pl			{ padding-left: var(--space-normal); }
.pl-larger	{ padding-left: var(--space-larger); }
.pl-large	{ padding-left: var(--space-large); }

.pr-smaller	{ padding-right: var(--space-smaller); }
.pr-small	{ padding-right: var(--space-small); }
.pr			{ padding-right: var(--space-normal); }
.pr-larger	{ padding-right: var(--space-larger); }
.pr-large	{ padding-right: var(--space-large); }




.py-smaller	{ padding-top: var(--space-smaller); 	padding-bottom: var(--space-smaller); }
.py-small	{ padding-top: var(--space-small);		padding-bottom: var(--space-small); }
.py			{ padding-top: var(--space-normal);		padding-bottom: var(--space-normal); }
.py-larger	{ padding-top: var(--space-larger);		padding-bottom: var(--space-larger); }
.py-large	{ padding-top: var(--space-large);		padding-bottom: var(--space-large);	}

.px-smaller	{ padding-left: var(--space-smaller);	padding-right: var(--space-smaller); }
.px-small	{ padding-left: var(--space-small);		padding-right: var(--space-small); }
.px			{ padding-left: var(--space-normal);	padding-right: var(--space-normal); }
.px-larger	{ padding-left: var(--space-larger); 	padding-right: var(--space-larger); }
.px-large	{ padding-left: var(--space-large);		padding-right: var(--space-large); }