.ti__header {
  @include make-col(12);
  position: relative;
  padding: 15px 0;
  border-bottom: 1px solid $gray-light;

  &-inactive .ti__header-number,
  &-inactive .ti__header-title,
  &-inactive .ti__header-hint {
    opacity: .5;
  }

  & h3 {
    margin-bottom: 0;
  }

  &-number {
    display: block;
    color: $pewter;
  }

  &-title {
    display: block;
    line-height: 1;
    margin-top: -2px;
  }

  &-hint {
    display: block;
    color: $pewter;
    font-size: .875rem;
    font-weight: 400;
    line-height: 24px;

    &.ti__header-hint {
      margin-bottom: -8px;
    }

    @include media-breakpoint-down(sm) {
      font-weight: 700;
    }
  }
}