body > header {
  --wcag-t--font-size: var(--docs--header--font-size);

  grid-area: header;

  position: sticky;
  inset-block-start: 0;
  z-index: 3;

  display: flex;
  place-content: space-between;
  place-items: center;
  gap: 2rem;
  flex-flow: column nowrap;

  color: var(--docs--header--color);
  background-color: var(--docs--header--background-color);
  box-shadow: var(--docs--header--box-shadow);

  min-block-size: var(--docs--header--min-height);
  padding-inline: var(--docs--header--padding-inline);
  padding-block: 0 1.5rem;

  @media screen and (width >= 1024px) {
    flex-flow: row nowrap;

    padding-block: 0;
  }

  a {
    --wcag-t--text-decoration: none;

    &[logo] {
      --wcag-t--font-size: var(--docs--header--logo--height);

      display: inline-block;
      inline-size: 14.6rem;
      block-size: 6.5rem;

      padding-inline: 0.5rem;
      border-radius: var(--docs--header--menu--border-radius);

      color: var(--docs--header--logo--color);
    }
  }

  i {
    display: inline-block;
  }
}
