@use '../mixins/_all' as *

.title,
.subtitle
  hyphens: auto
  word-break: break-word
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  font-size: var(--bal-text-size-xxx-large)
  line-height: var(--bal-line-height-xxx-large)
  +tablet
    font-size: var(--bal-text-size-xxx-large-tablet)
    line-height: var(--bal-line-height-tablet-xxx-large)
  +desktop
    font-size: var(--bal-text-size-xxx-large-desktop)
    line-height: var(--bal-line-height-desktop-xxx-large)
  em,
  span
    font-weight: inherit
  strong
    font-weight: var(--bal-font-weight-bold)
  &:not(:last-child)
    margin-bottom: var(--bal-space-x-small)
    +tablet
      margin-bottom: var(--bal-space-x-small-tablet)
    +desktop
    margin-bottom: var(--bal-space-x-small-desktop)

.title
  font-family: var(--bal-title-font-family)
  font-weight: var(--bal-title-font-weight)

.subtitle
  font-family: var(--bal-subtitle-font-family)
  font-weight: var(--bal-subtitle-font-weight)