@scope (.section-headline) {
  :scope {
    padding-block-start: var(--space-block);
  }

  :scope.is-bg-blue {
    background-color: var(--color-bg-blue);
  }

  h2 {
    margin-bottom: 0;
    font-size: 2.2em;
    font-weight: 500;
  }

  .spacer {
    height: 3em;
  }

  @media (width <= 991px) {
    :scope {
      padding-block-start: var(--space-block-medium);
    }

    .spacer {
      height: 2.4em;
    }
  }

  @media (width <= 767px) {
    :scope {
      padding-block-start: var(--space-block-small);
    }

    h2 {
      font-size: 1.6em;
    }
  }

  @media (width <= 479px) {
    :scope {
      padding-block-start: var(--space-block-small);
    }

    .eyebrow {
      font-size: 0.8em;
    }

    h2 {
      font-size: 1.4em;
    }
  }
}