@layer components.blocks {
  .simple-header {
    @mixin border-t var(--border-hairline), solid, var(--color-border-subtle);
    @mixin border-b var(--border-hairline), solid, var(--color-border-normal);

    color: var(--color-text-primary);
    background-color: var(--color-surface-base);
  }

  .simple-header__inner {
    @mixin layout-wrapper;
    @mixin py var(--size-14);

    display: grid;
    gap: var(--size-10);

    @media (--bp-desktop) {
      @mixin layout-columns;

      align-items: center;
    }
  }

  .simple-header__text {
    @media (--bp-desktop) {
      grid-column: body-start / margin-end;
      grid-row: 1;
    }
  }

  .simple-header__eyebrow {
    @mixin typo_label;
    @mixin ma var(--size-0);

    color: var(--color-text-quiet);
  }

  .simple-header__title {
    @mixin mt var(--size-6);
    @mixin mb var(--size-0);

    font-family: var(--font-display);
    font-size: clamp(var(--type-9), 6vw, var(--size-15));
    font-weight: var(--font-weight-display);
    line-height: 1;
    letter-spacing: var(--tracking-display);
  }

  .simple-header__standfirst {
    @mixin typo_standfirst;
    @mixin mt var(--size-8);
    @mixin mb var(--size-0);

    color: var(--color-text-secondary);
  }

  .simple-header__count {
    @mixin ma var(--size-0);

    display: grid;
    place-items: center;
    order: -1;

    aspect-ratio: 1;
    width: var(--size-14);

    font-family: var(--font-header);
    font-size: var(--type-7);
    font-weight: var(--font-weight-heading);
    line-height: 1;
    color: var(--color-text-on-accent);

    background-color: var(--color-primary);
    box-shadow: var(--shadow-raised);

    @media (--bp-desktop) {
      grid-column: rail-start / rail-end;
      grid-row: 1;
      width: var(--size-16);
      font-size: var(--type-10);
    }
  }

  .simple-header__hidden {
    @mixin visually-hidden;
  }
}