gnosis-css/css/scss/bootstrap/_typography.scss

%heading {
	margin-top: 0; // 1
	margin-bottom: 0.25em;
	font-family: $headings-font-family;
	font-optical-sizing: auto;
	font-style: $headings-font-style;
	color: var(--#{$prefix}heading-color);
}

a {
	color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
	text-decoration: $link-decoration;
	text-underline-offset: 0.25rem;
	text-decoration-thickness: 2px;
	&:hover {
		--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
		text-decoration: $link-hover-decoration;
	}
}

h1 {
	@extend %heading;
	@include font-size($h1-font-size);
	font-weight: $headings-font-bold;
	line-height: 1.48;
}

h2 {
	@extend %heading;
	@include font-size($h2-font-size);
	font-weight: $headings-font-bold;
	line-height: 1.5;
}

h3 {
	@extend %heading;
	@include font-size($h3-font-size);
	font-weight: $headings-font-bold;
	line-height: 1.52;
}

h4 {
	@extend %heading;
	@include font-size($h4-font-size);
	font-weight: $headings-font-medium;
	line-height: 1.5;
}

h5 {
	@extend %heading;
	@include font-size($h5-font-size);
	font-weight: $headings-font-medium;
	line-height: 1.5;
}

h6 {
	@extend %heading;
	@include font-size($h6-font-size);
	font-weight: $headings-font-medium;
	line-height: 1.52;
}

p {
	text-wrap: balance;
	max-width: 80ch;
}

.alternative {
	font-family: $display-font-family;
	line-height: 1.1;
	font-weight: 500;
	font-size: 21px;
}

p.first-paragraph {
	font-size: 1.125em;
}

p.first-paragraph:first-line {
	color: var(--#{$prefix}primary);
	text-transform: uppercase;
	font-size: 0.85em;
	font-weight: bold;
}

[data-#{$prefix}theme='dark'] {
	p.first-paragraph:first-line {
		color: var(--#{$prefix}primary-text-emphasis);
	}
}

@include media-breakpoint-down(lg) {
	p.first-paragraph br {
		display: none;
	}
}

smaller,
.smaller {
	@include rfs($smaller-font-size, --#{$prefix}smaller-font-size);
	font-size: $smaller-font-size;
}