Auth split

A two-pane arrangement built directly on the 12-column Grid rather than a bespoke layout component: a centered form on the left and a rounded media panel on the right. Each column spans all 12 at mobile and half the grid from md up, so the form is full-width on small screens and the media panel is hidden there. The gap is collapsed to zero and the media pane is inset with padding, then clipped to a rounded corner.

div

min-h-dvh flex column on the card surface

Grid

12 columns, gap collapsed to zero

GridCol

span 12 → md:6 - the centered form

GridCol

span 12 → md:6, hidden below md - the media panel

div

h-full, rounded, overflow-hidden - clips the media

<div className="flex min-h-dvh w-full flex-col bg-card">
  <Grid className="min-h-0 flex-1 gap-0" columns={12}>
    <GridCol
      className="flex items-center justify-center p-6 md:col-span-6 md:p-12"
      span={12}
    >
      {left}
    </GridCol>
    <GridCol
      className="relative hidden h-full py-6 pr-6 md:col-span-6 md:block"
      span={12}
    >
      <div className="h-full overflow-hidden rounded-3xl">{right}</div>
    </GridCol>
  </Grid>
</div>