.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.auth-art { position: relative; overflow: hidden; background: #000; }
.auth-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.auth-art .credit {
  position: absolute; left: 16px; bottom: 14px;
  padding: 4px 8px; border-radius: 3px;
  background: rgb(0 0 0 / .72); color: #fafafa;
  font: 12px var(--mono);
}
.auth-art .credit a { color: inherit; }

.auth-side {
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
  background: var(--bg);
}

.auth-main {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 32px 0;
  text-align: center;
}
#status { display: grid; justify-items: center; gap: 14px; }
#status:empty { display: none; }

.auth-main h1 {
  margin: 0;
  font: 700 34px/1.05 var(--display);
  font-stretch: 80%;
}
.auth-main p { margin: 0; max-width: 40ch; color: var(--text-2); }

.auth-foot { color: var(--text-2); font-size: 13px; text-align: center; }
.auth-foot a { color: var(--text); }

@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-art { display: none; }
  .auth-side { padding: 20px 16px; }
}