.wrapper{display:flex;align-items:center;flex-direction:column;width:100%;span{margin-right:1rem}}.outer_wrapper{display:grid;place-items:center;grid-template-columns:2fr 1fr;height:calc(100vh - 40px);background-color:#f5f5f5;padding:20px}.graphic{justify-content:center;color:white;margin:1rem;height:calc(100% - 10px);width:100%;border-radius:20px;position:relative;overflow:hidden}.graphic:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);z-index:1}.graphic>*{position:relative;z-index:2}.graphic{background:url(https://d2ylrj05l677po.cloudfront.net/sign_in.png) no-repeat 50%;background-size:cover;align-items:center}.graphic,.login_form{display:flex;flex-direction:column}.login_form{gap:1rem;margin:1rem;width:calc(100% - 40px);padding:20px}@media screen and (max-width:868px){.outer_wrapper{grid-template-columns:1fr;height:100%;padding:0}.graphic{display:none}.wrapper{height:100vh}}@media (prefers-color-scheme:dark){.outer_wrapper{background:#3e3e3e}}