.brand-logo {
  display: block;
  width: clamp(190px, 19vw, 270px);
  height: auto;
  max-height: 64px;
  object-fit: contain;
  object-position: left center;
}

/* Legacy homepage markup uses the same logo as a crisp image background. */
.brand:has(.monogram) {
  width: clamp(190px, 19vw, 270px);
  min-height: 58px;
  background: url("images/dream-drive-logo.png") left center / contain no-repeat;
}

.brand:has(.monogram) > span { display: none; }

.brand-footer .brand-logo { width: clamp(190px, 20vw, 250px); }

@media (max-width: 700px) {
  .brand-logo { width: 168px; max-height: 48px; }
  .brand:has(.monogram) { width: 168px; min-height: 48px; }
}