$title-color: $grey-darker !default;
$title-size: $size-3 !default;
$title-weight: $weight-semibold !default;
$title-line-height: 1.125 !default;
$title-strong-color: inherit !default;
$title-strong-weight: inherit !default;
$title-sub-size: 0.75em !default;
$title-sup-size: 0.75em !default;

$subtitle-color: $grey-dark !default;
$subtitle-size: $size-5 !default;
$subtitle-weight: $weight-normal !default;
$subtitle-line-height: 1.25 !default;
$subtitle-strong-color: $grey-darker !default;
$subtitle-strong-weight: $weight-semibold !default;
$subtitle-negative-margin: -1.25rem !default;


.title, .subtitle {
  @extend %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: $title-line-height;
    strong {
        color: $title-strong-color;
        font-weight: $title-strong-weight;
    }
    & + .highlight {
        margin-top: -0.75rem;
    }
    &:not(.is-spaced) + .subtitle {
        margin-top: $subtitle-negative-margin;
    }
    // Sizes 
    @each $size in $sizes {
        $i: index($sizes, $size);
        &.is-#{$i} {
            font-size: $size;
        }
    }
}

.subtitle {
    color: $subtitle-color;
    font-size: $subtitle-size;
    font-weight: $subtitle-weight;
    line-height: $subtitle-line-height;
    strong {
        color: $subtitle-strong-color;
        font-weight: $subtitle-strong-weight;
    }
    &:not(.is-spaced) + .title {
        margin-top: $subtitle-negative-margin;
    }
    // Sizes
    @each $size in $sizes {
        $i: index($sizes, $size);
        &.is-#{$i} {
            font-size: $size;
        }
    }
}
.ttitle {
    color: inherit;
    font-size: 28px;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 500;
    @include breakpoint('medium') {
        text-align: center;
        font-size: 36px;
    }
}
.tsubtitle {
    font-weight: 300;
    text-align: center;
    font-size: 16px;
    line-height: 1.45;
    color: inherit;
    opacity: 0.7;
    @include breakpoint('medium') {
        font-size: 18px;
        font-weight: 300;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}
.landing-heading {
    margin-bottom: 60px;
    color: $secondary;
}
.landing-heading__title {
    color: inherit;
    font-size: 28px;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 500;
    @include breakpoint('medium') {
        text-align: center;
        font-size: 36px;
    }
}
.landing-heading__subtitle {
    font-weight: 300;
    text-align: center;
    font-size: 16px;
    line-height: 1.45;
    color: inherit;
    opacity: 0.7;
    @include breakpoint('medium') {
        font-size: 18px;
        font-weight: 300;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}
.heading--white {
    color: #FFFFFF !important;
}