.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.brand__mark {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex-shrink: 0;
  object-fit: contain;
}

.brand__tagline {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  max-inline-size: 9rem;
}

.brand__image {
  inline-size: auto;
  block-size: 2.5rem;
  object-fit: contain;
}

.brand--on-dark .brand__tagline {
  color: var(--color-on-dark-muted);
}