@utility container {
    margin-inline: auto;
	@apply px-6 md:px-12;
	max-width: calc(var(--breakpoint-2xl) + 6rem);
}

@utility h1-xl {
	@apply font-sans text-xl/[0.9] font-black;
}

@utility h1 {
	@apply font-sans text-h1/[1] font-black;
}

@utility h2 {
	@apply font-sans text-h2/[1.1] font-bold;
}

@utility h3 {
	@apply font-sans text-h3/[1.2] font-bold;
}

@utility h4 {
	@apply font-sans text-h4/[1.3] font-medium ;
}

@utility h5 {
	@apply font-sans text-h5/[1.4] font-medium;
}

@utility h6 {
	@apply font-sans text-h6/[1.5] font-medium;
}

@layer base {


	a {
		@apply text-inherit no-underline;
	}
	
	p {
		@apply m-0;
	}
	
	img {
		@apply h-auto max-w-full;
	}

	.has-xl-font-size {
		@apply h1-xl;
	}

	h1, .has-h-1-font-size {
		@apply h1;
	}

	h2, .has-h-2-font-size {
		@apply h2;
	}

	h3, .has-h-3-font-size {
		@apply h3;
	}

	h4, .has-h-4-font-size {
		@apply h4;
	}

	h5, .has-h-5-font-size {
		@apply h5;
	}

	h6, .has-h-6-font-size {
		@apply h6;
	}
	
	.has-p-xs-font-size {
		@apply text-p-xs/[1.5];
	}

	.has-p-sm-font-size {
		@apply text-p-sm/[1.5];
	}

	.has-p-md-font-size {
		@apply text-p-md/[1.4] font-light;
	}

	.has-p-lg-font-size {
		@apply text-p-lg/[1.3] font-light;
	}

	.has-p-xl-font-size {
		@apply text-p-xl/[1.1] font-thin;
	}

	.has-p-xxl-font-size {
		@apply text-p-xxl/[1] font-thin;
	}

}