:root {
  --brand-screen-gutter: 25px;
  --brand-screen-top: 29px;
  --brand-lockup-width: 158px;
}

.brand-link img,
.public-brand img {
  display: block;
  width: var(--brand-lockup-width);
}

.auth-main {
  position: relative;
}

.auth-header {
  justify-content: flex-end;
}

.auth-brand-link {
  position: absolute;
  inset-inline-start: var(--brand-screen-gutter);
  top: var(--brand-screen-top);
}

.public-header {
  padding-inline-start: var(--brand-screen-gutter);
}

/* The 158 × 72/390 lockup is 29.17px tall; offset its centered desktop
   position so all three lockups start at the same 29px screen coordinate. */
.public-brand {
  transform: translateY(2.6px);
}

@media (max-width: 800px) {
  .public-brand {
    transform: translateY(13px);
  }
}