.header {
  --header-color: var(--anrt-color-white);

  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  margin-block: var(--anrt-spacing-075);
  color: var(--header-color);

  :where(.page--grey) & {
    --header-color: var(--anrt-color-text);
  }
}

@media (min-width: 80rem) {
  .header {
    margin-block: var(--anrt-spacing-200);
  }
}

@media (min-width: 80rem) {
  .header__off-canvas {
    display: none;
  }
}

.header__navbar {
  display: none;
}

@media (min-width: 80rem) {
  .header__navbar {
    display: flex;
    align-items: center;
  }
}