@layer base {
	:root {
		--font-sans: "Roboto Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		--font-serif: "Roboto Slab Variable", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	}
}

h1, h2, h3, h4, h5, h6 {
	@apply font-bold;

	&:last-child {
		@apply mb-0;
	}
}

h1 {
	@apply mb-4;
	@apply text-4xl;
	@apply lg:text-5xl;

	&:has(+ h2) {
		@apply mb-4;
	}
}

h2 {
	@apply mb-2;
	@apply lg:mb-8;
	@apply text-3xl;
	@apply lg:text-4xl;

	&.card-title {
		@apply mb-1;
	}
}

h3 {
	@apply mb-2;
	@apply text-2xl;
	@apply lg:text-3xl;
}

h4 {
	@apply mb-2;
	@apply text-xl;
	@apply lg:text-2xl;
}

h5 {
	@apply mb-2;
	@apply text-lg;
	@apply lg:text-xl;
}

h6 {
	@apply mb-2;
	@apply text-lg;
}