* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 20px; color: #392755; background: #f7efff; font: 16px system-ui, sans-serif; }
main { width: min(100%, 750px); display: grid; grid-template-columns: 1fr 1fr; background: #fffaf7; overflow: hidden; border-radius: 22px; }
img { width: 100%; height: 100%; object-fit: cover; }
main > div { padding: 30px; }
h1 { margin: 0; font-size: 27px; }
p { color: #61516d; }
form, label { display: grid; gap: 8px; }
form { gap: 14px; margin-top: 24px; }
input, button { font: inherit; border-radius: 9px; padding: 11px 12px; min-width: 0; }
input { border: 1px solid #8d7999; background: #fff; color: #392755; }
button { border: 0; background: #ffdab2; color: #392755; font-weight: 700; cursor: pointer; }
[role=alert] { color: #8c293b; }
@media (max-width: 600px) {
  main { grid-template-columns: 1fr; }
  img { height: min(42vw, 200px); object-position: 50% 41%; }
  main > div { padding: 22px; }
}