:root {
  --college-navy: #123467;
  --college-gold: #b88726;
}

.brand,
.auth-brand {
  gap: 12px;
}

.college-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
  border-radius: 10px;
}

.auth-brand .college-logo {
  width: 88px;
  height: 88px;
  flex-basis: 88px;
}

.brand > span,
.auth-brand > span {
  color: var(--college-navy);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.auth-brand > span {
  font-size: 21px;
}

.brand b,
.auth-brand b {
  display: block;
  color: var(--college-gold);
  font-size: 11px;
  letter-spacing: 0.15em;
}

.auth-brand b {
  font-size: 14px;
}

.auth-aside {
  background: #173c9b url('https://res.cloudinary.com/ywbvk3ek/image/upload/c_fill,g_auto,h_1200,w_1100/IMG-20260901-WA0008_1') center / cover no-repeat;
  overflow: hidden;
}

@media (min-width: 801px) {
  .auth-screen {
    gap: 18px;
    padding: 18px;
    background: #f2f5f9;
    grid-template-columns: minmax(390px, .88fr) 1.12fr;
  }

  .auth-panel {
    width: auto;
    min-height: calc(100vh - 36px);
    margin: 0;
    padding: clamp(52px, 6vw, 92px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 12px 34px #10285b0d;
  }

  .auth-panel > * { max-width: 430px; }

  .auth-aside {
    min-height: calc(100vh - 36px);
    border-radius: 24px;
  }
}

.institution {
  line-height: 1.45;
}

@media (max-width: 700px) {
  .college-logo {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}