shelving/ui/block/Subheading.module.css

Toolkit for using data in JavaScript.

@import "../style/base.css";

@layer components {
	.subheading,
	.prose :is(h3, h4, h5, h6) {
		display: block;
		inline-size: 100%;
		margin-inline: 0;
		margin-block-start: var(--subheading-spacing-before, var(--spacing-section));
		margin-block-end: var(--subheading-spacing, var(--spacing-paragraph));

		font-family: var(--subheading-font, var(--font-body));
		font-weight: var(--subheading-weight, var(--weight-strong));
		line-height: var(--subheading-leading, var(--leading));
		font-size: var(--subheading-size, var(--size-large));
		text-align: var(--subheading-align, left);
	}
}

@layer overrides {
	.subheading,
	.prose :is(h3, h4, h5, h6) {
		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
}