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

  .auth-pitch {
    background: var(--pitch-bg);
    color: var(--pitch-ink);
    display: flex;
    align-items: center;
    padding: var(--s-7);

    h1 {
      font-size: clamp(2rem, 3.5vw, 3rem);
      line-height: 1.1;
      margin-top: var(--s-3);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      font-weight: 700;
      letter-spacing: 0.02em;
      opacity: 0.9;

      .brand-mark {
        inline-size: 1.4rem;
        block-size: 1.4rem;
      }
    }

    .lede {
      font-size: 1.125rem;
      opacity: 0.92;
      margin-top: var(--s-4);
    }
  }
  .auth-pitch-inner {
    max-width: 30rem;
    margin-inline: auto;
  }

  .auth-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-6);
  }
  .auth-form-inner {
    width: 100%;
    max-width: 24rem;

    h1 {
      font-size: 1.5rem;
      margin-bottom: var(--s-2);
    }

    label {
      color: var(--ink);
      opacity: 0.8;
    }

    form {
      margin-top: var(--s-5);

      & + p {
        margin-top: var(--s-4);
      }
    }
  }

  @media (max-width: 48rem) {
    .auth {
      grid-template-columns: 1fr;
    }
    
    .auth-pitch {
      display: none;
    }
  }
}