:root {
  --headline-color: currentColor;
  --headline-font-size: 1.8rem;
  --headline-font-weight: var(--font-weight-semibold);
  --headline-highlight-font-weight: var(--font-weight-light);
  --headline-kicker-font-size: 1.6rem;
  --headline-kicker-font-weight: inherit;
  --headline-kicker-letter-spacing: 0;
  --headline-letter-spacing: -0.04em;
  --headline-line-height: var(--line-height-small);
  --headline-link-color: var(--link-color);
  --headline-link-hover-color: var(--link-hover-color);

  @include use-responsive-sizing(--headline-kicker-spacing, responsive-map(xs 1rem, l 2rem));
}

.headline {
  color: var(--headline-color);
  font-size: var(--headline-font-size);
  font-weight: var(--headline-font-weight);
  letter-spacing: var(--headline-letter-spacing);
  line-height: var(--headline-line-height);
}

.headline--1 {
  @include use-responsive-sizing(--headline-font-size, responsive-map(xs 3rem, xl 4.6rem));
}

.headline--2 {
  @include use-responsive-sizing(--headline-font-size, responsive-map(xs 2.6rem, xl 3.6rem));
}

.headline--3 {
  @include use-responsive-sizing(--headline-font-size, responsive-map(xs 2.2rem, xl 2.6rem));
}

.headline__link {
  color: var(--headline-link-color);
  display: block;
  transition-property: color;

  &:is(:hover:not([disabled]), :focus:not(.has-invisible-focus)) {
    color: var(--headline-link-hover-color);
  }
}

.headline__kicker {
  display: block;
  font-size: var(--headline-kicker-font-size);
  font-weight: var(--headline-kicker-font-weight);
  letter-spacing: var(--headline-kicker-letter-spacing);
  line-height: var(--headline-kicker-line-height, inherit);

  &:first-child {
    margin-block-end: var(--headline-kicker-spacing);
  }

  &:last-child {
    margin-block-start: var(--headline-kicker-spacing);
  }
}

.headline__text {
  --underline-color: transparent;
  --underline-color--enter: currentColor;
  --underline-height: 2px;
}

.headline__highlight {
  color: var(--headline-highlight-color, var(--headline-color));
  font-style: normal;
  font-weight: var(--headline-highlight-font-weight);
}