.brand-logo {
  display: block;
  flex: 0 0 90px;
  width: 90px;
  height: 48px;
  overflow: hidden;
  border-radius: 6px;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Keep the brand name available to assistive technology while removing the
   visible text label beside the logo from every navigation header. */
.brand > span:not(.brand-logo) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .brand-logo {
    flex-basis: 64px;
    width: 64px;
    height: 38px;
    border-radius: 5px;
  }
}