.ds-section-headline {
  color: var(--ds-color-london-5);
  display: block;
  font-family: var(--ds-type-system-sans-lining);
  font-size: var(--ds-type-scale-1);
  font-weight: 700;
  line-height: var(--ds-type-leading-lower);
  &.ds-section-headline--inverse {
    color: var(--ds-color-london-100);
  }
}

.ds-section-headline--heavy {
  font-size: var(--ds-type-scale-3);
  font-weight: 800;
  line-height: var(--ds-type-leading-upper);
}

.ds-section-headline--rule-emphasised,
.ds-section-headline--rule-accent,
.ds-section-headline--rule-heavy {
  &::before {
    content: '';
    display: block;
    margin: 0 0 0.5rem 0;
    position: relative;
  }
}

.ds-section-headline--rule-accent {
  &::before {
    background-color: var(--ds-color-economist-red);
    height: 0.25rem;
    width: 1.875rem;
  }
  &.ds-section-headline--inverse {
    &::before {
      background-color: var(--ds-color-london-100);
    }
  }
}

.ds-section-headline--rule-emphasised {
  &::before {
    background-color: var(--ds-color-london-5);
    height: 0.0625rem;
    position: relative;
  }
}

.ds-section-headline--rule-heavy {
  &::before {
    background-color: var(--ds-color-london-5);
    height: 0.125rem;
  }
}

.ds-section-subheadline {
  color: var(--ds-color-london-5);
  display: inline-block;
  font-family: var(--ds-type-system-sans-lining);
  font-size: var(--ds-type-scale-1);
  font-weight: 400;
  line-height: var(--ds-type-leading-lower);
  &.ds-section-subheadline--inverse {
    color: var(--ds-color-london-100);
  }
  .ds-section-headline--rule-accent & {
    display: block;
  }
}

.ds-section-subheadline--heavy {
  font-size: var(--ds-type-scale-3);
  line-height: var(--ds-type-leading-upper);
}

.ds-section-headline-link {
  border-bottom: 0.125rem solid transparent;
  color: var(--ds-color-london-5);
  text-decoration: none;
  transition:
    color var(--ds-interactions-transition),
    border-color var(--ds-interactions-transition);
  &:hover {
    border-bottom-color: var(--ds-color-chicago-30);
    color: var(--ds-color-chicago-30);
  }
  &:focus {
    border-bottom-color: transparent;
    box-shadow: 0 0 0 0.125rem var(--ds-color-hong-kong-55);
    outline: solid transparent;
  }
  &:active {
    box-shadow: none;
    color: var(--ds-color-chicago-45);
  }
  &.ds-section-headline-link--inverse {
    color: var(--ds-color-london-100);
    &:hover {
      border-bottom-color: var(--ds-color-london-85);
      color: var(--ds-color-london-85);
    }
    &:active {
      border-bottom-color: var(--ds-color-hong-kong-55);
      color: var(--ds-color-london-100);
    }
  }
}