%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; }