.site-header {
  background: #031021;
}

.brand {
  width: clamp(17rem, 25vw, 22rem);
  height: 6rem;
  max-width: 42vw;
  flex: 0 0 auto;
}

.brand-lockup {
  display: block;
  width: 100%;
}

.brand-lockup img {
  display: block;
  width: 100%;
  height: auto;
  background: #031021;
}

@media (max-width: 900px) {
  .brand {
    width: min(17rem, calc(100vw - 8.5rem));
    height: 5.25rem;
    max-width: none;
  }
}

@media (max-width: 560px) {
  .brand {
    width: min(13rem, calc(100vw - 7.5rem));
    height: 5rem;
  }
}