.authentication-wrapper { display: flex; flex-basis: 100%; inline-size: 100%; min-block-size: 100vh; } .authentication-wrapper .authentication-inner { inline-size: 100%; } .authentication-wrapper.authentication-basic { align-items: center; justify-content: center; } .authentication-wrapper .auth-cover-illustration { z-index: 1; max-inline-size: 38rem; } .authentication-wrapper .authentication-image-object-left { position: absolute; inset-block-end: 6%; inset-inline-start: 4%; } .authentication-wrapper .authentication-image-object-right { position: absolute; inset-block-end: 7%; inset-inline-end: 4%; } .authentication-wrapper .authentication-image { position: absolute; z-index: -1; inline-size: 100%; inset-block-end: 0; inset-inline-start: 0; } .authentication-wrapper .authentication-image-model { inline-size: 768px; } .authentication-wrapper.authentication-cover { align-items: flex-start; } .authentication-wrapper.authentication-cover .authentication-inner { position: relative; min-block-size: 100vh; } .authentication-wrapper.authentication-cover .authentication-image { inset-inline-start: unset; } .authentication-wrapper.authentication-cover .authentication-image-tree { position: absolute; inset-block-end: 4rem; inset-inline-start: 3rem; } .authentication-wrapper.authentication-basic .authentication-inner { max-inline-size: 460px; } .authentication-wrapper .auth-input-wrapper .auth-input { max-inline-size: 50px; padding-inline: 0.4rem; } @media (max-width: 575.98px) { .authentication-wrapper .auth-input-wrapper .auth-input { font-size: 1.125rem; } } @media (max-width: 1199.98px) { .authentication-cover .authentication-image-model { position: relative; inline-size: 575px; inset-block-start: 1rem; } } .authentication-wrapper .authentication-bg { background-color: #fff; }