:root {
  --logo-fill--light: #29447c;
  --logo-fill--dark: #ffffff;
}

@media (prefers-color-scheme: light) {
  :root {
    --logo-fill: var(--logo-fill--light);
  }
}

@media (prefers-color-scheme: dark) {
  root {
    --logo-fill: var(--logo-fill--dark);
  }
}

[color-scheme=light] {
  --logo-fill: var(--logo-fill--light);
}

[color-scheme=dark] {
  --logo-fill: var(--logo-fill--dark);
}

.mxd-logo__image-fixed-height {
  display: block;
  width: auto;
  height: 4.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-logo__image-fixed-height {
    height: 5.6rem;
  }
}