@import '../../../scss/settings/colours';
@import '../../../scss/settings/typography';
@import '../../../scss/utility/sass-mq';

.sup {
  composes: baseSupSubScripts from '../Text/Text.modules.scss';
}

.base {
  composes: noSpacing from '../../Spacing.modules.scss';
  composes: wordBreak from '../../Typography.modules.scss';

  @include helvetica-neue-thin-35;
}

.heading {
  composes: base;

  font-size: 2.75rem;
  line-height: 1.14; // 48px

  .sup {
    font-size: 1.25rem;
    top: -1.2em;
  }

  @include mq($from: md) {
    font-size: 4.5rem;
    line-height: 1.11; // 80px
    letter-spacing: 0.2px;

    .sup {
      font-size: 1.25rem;
      top: -2.2em;
    }
  }
}

.inverted {
  color: $color-white;
}

.default {
  color: $color-secondary;
}