:host {
  display: block;
}

.hy-paragraph-text {
  color: var(--grayscale-dark);
  font-family: var(--main-font-family);
  font-size: 14px;
  line-height: 20px;

  @include breakpoint($medium) {
    font-size: var(--base-font-size);
    line-height: 24px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--brand-main-nearly-black);
    font-family: var(--main-font-family);
    font-weight: 700;
    padding: 0 0 1rem;
    margin: 0;
    width: 100%;

    @include breakpoint($medium) {
      padding: 0 0 1.5rem;
    }

    &.negative {
      color: var(--grayscale-white);
    }
  }

  h1 {
    @include font-size(32px, 32px);
    letter-spacing: -1px;
    text-transform: uppercase;

    @include breakpoint($narrow) {
      // > 480px
      @include font-size(46px, 52px);
      letter-spacing: -1.5px;
    }

    @include breakpoint($extrawide) {
      // > 1200px
      @include font-size(52px, 64px);
      letter-spacing: -1.6px;
    }

    @include breakpoint($overwide) {
      // > 1400px
      @include font-size(52px, 64px);
      letter-spacing: -1.6px;
    }
  }

  // default h2 used in content pages
  h2 {
    @include font-size(26px, 32px);
    letter-spacing: -0.8px;

    @include breakpoint($narrow) {
      // > 480px
      @include font-size(32px, 32px);
      letter-spacing: -1px;
    }

    @include breakpoint($extrawide) {
      // > 1200px
      @include font-size(40px, 48px);
      letter-spacing: -1.2px;
    }

    @include breakpoint($overwide) {
      // > 1400px
      @include font-size(40px, 48px);
      letter-spacing: -1.2px;
    }
  }

  // default h3 used in content pages
  h3 {
    @include font-size(22px, 28px);
    letter-spacing: -0.7px;

    @include breakpoint($narrow) {
      // > 480px
      @include font-size(26px, 32px);
      letter-spacing: -0.8px;
    }
  }

  h4 {
    @include font-size(18px, 24px);
    letter-spacing: -0.56px;

    @include breakpoint($narrow) {
      // > 480px
      @include font-size(22px, 28px);
      letter-spacing: -0.69px;
    }
  }

  h5 {
    @include font-size(16px, 20px);
    letter-spacing: -0.5px;

    @include breakpoint($narrow) {
      // > 480px
      @include font-size(18px, 24px);
      letter-spacing: -0.56px;
    }
  }

  h6 {
    @include font-size(14px, 16px);
    letter-spacing: -0.44px;

    @include breakpoint($narrow) {
      // > 480px
      @include font-size(16px, 20px);
      letter-spacing: -0.5px;
    }
  }
}