.branding {
  --logo-color: var(--anrt-color-header-primary);
  --logo-color-focused: var(--anrt-color-secondary);

  display: inline-block;

  :where(.page--grey) & {
    --logo-color: var(--anrt-color-primary);
    --logo-color-focused: var(--anrt-color-text);
  }
  :where(.page--grey .nav-mobile) & {
    --logo-color: var(--anrt-color-white);
    --logo-color-focused: var(--anrt-color-secondary);
  }
}

.branding__link {
  display: block;

  &:hover svg,
  &:focus svg {
    color: var(--logo-color-focused);
  }
}

.branding__link svg {
  display: block;
  width: 135px;
  height: 24px;
  color: var(--logo-color);
}

.branding__link {
  margin-top: -16px;
}

@media screen and (min-width: 64rem) {
  .branding__link svg {
    width: 244px;
    height: 44px;
  }
}