.brand-logo {
  display: inline-grid;
  width: 180px;
  max-width: 100%;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
}
.brand-logo > img {
  display: block;
  width: 100%;
  height: auto;
  grid-area: 1 / 1;
}
.brand-logo > .brand-on-dark {
  display: none;
}
[data-theme="dark"] .brand-logo > .brand-on-light,
.brand-logo.brand-logo--dark > .brand-on-light {
  display: none;
}
[data-theme="dark"] .brand-logo > .brand-on-dark,
.brand-logo.brand-logo--dark > .brand-on-dark {
  display: block;
}