.login-page{
    height: 100vh;
    background: white;
}

.login-page > .row{
    height: 100%;
}

.login-page .login__input-container,
.login-page .login__bg-container{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0px;
}

.login__input-container .login__input-box{
    max-width: 350px;
    flex: 0 0 auto;
} 

.login__input-box > .login__header-title{
    margin-bottom: 1rem;
}

.login__bg-container{
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.login__bg-container > img{
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

@media (max-width:991.9px){
    .login-page > .row{
        flex-direction: column-reverse;
    }

    .login-page .login__input-container,
    .login-page .login__bg-container{
        flex:1;
    }

    .login-page .login__input-container{
        z-index: 1;
        background: white;
    }

    .login__input-container .login__input-box{
        box-shadow: 0px 5px 15px 5px rgba(74, 74, 74, 0.12);
        position: absolute;
        background: white;
        top: -50vh;
        padding: 2rem 1rem;
        border-radius: 0.5em;
    } 

    .login__bg-container > img{
        height: 150%;
        position: absolute;
        top: -10rem;
    }

    .login__input-box > .login__header-title{
        text-align: center;
    }
}