$title-color ?= $grey-darker
$title-size ?= $size-3
$title-weight ?= $weight-semibold
$title-strong-color ?= inherit
$title-strong-weight ?= inherit
$title-sub-size ?= 75%
$title-sup-size ?= 75%

$subtitle-color ?= $grey-dark
$subtitle-size ?= $size-5
$subtitle-weight ?= $weight-light
$subtitle-strong-color ?= $grey-darker
$subtitle-strong-weight ?= $weight-semibold

.title,
.subtitle
  block()
  word-break break-word
  em,
  span
    font-weight inherit
  sub
    font-size $title-sub-size
  sup
    font-size $title-sup-size
  .tag
    vertical-align middle

.title
  color $title-color
  font-size $title-size
  font-weight $title-weight
  line-height 1.125
  strong
    color $title-strong-color
    font-weight $title-strong-weight
  & + .highlight
    margin-top -0.75rem
  &:not(.is-spaced) + .subtitle
    margin-top -1.5rem
  // Sizes
  for $size, $i in $sizes
    &.is-{$i+1}
      font-size $size

.subtitle
  color $subtitle-color
  font-size $subtitle-size
  font-weight $subtitle-weight
  line-height 1.25
  strong
    color $subtitle-strong-color
    font-weight $subtitle-strong-weight
  &:not(.is-spaced) + .title
    margin-top -1.5rem
  // Sizes
  for $size, $i in $sizes
    &.is-{$i+1}
      font-size $size