:root {
  --space-3: 12px;
  --space-4: 16px;
}

.brand-heading,
.login-brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.brand-copy {
  min-width: 0;
}

.brand-copy h1,
.login-brand h1 {
  word-break: keep-all;
}

.brand-logo,
.login-logo {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  object-fit: cover;
}

.brand-logo {
  width: 56px;
  height: 56px;
}

.login-brand {
  align-items: flex-start;
}

.login-logo {
  width: 96px;
  height: 96px;
}

.login-brand h1 {
  line-height: 1.22;
}

@media (max-width: 820px) {
  .brand-heading {
    gap: var(--space-3);
  }

  .brand-logo {
    width: 44px;
    height: 44px;
  }

  .login-brand {
    gap: var(--space-3);
  }

  .login-logo {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 420px) {
  .login-brand {
    align-items: center;
  }

  .login-brand h1 {
    font-size: 24px;
  }
}