.landing-section {
    display: flex;
    align-content: center;
    inline-size: 100%;
    block-size: 100vh;
    max-block-size: 100dvh;
    overflow: hidden;
}

.login-form-container, .landing-decorator {
    inline-size: 50%;
}


.form-heading, .login-form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .form-heading > * {
        text-align: center;
    }

.login-form-container {
    position: relative;
    gap: 3rem;
    padding: 2rem;
}

    .login-form-container form {
        display: flex;
        flex-direction: column;
        align-items: center;
        inline-size: 100%;
    }

    .form-heading, .login-form-container form {
        max-inline-size: 30rem;
    }

    .login-form-container .form-group,
    .login-form-container .form-control {
        inline-size: 100%;
    }

.landing-decorator {
    background: url('/assets/images/landing-bg.jpg') no-repeat 20% top /cover;
}

.login-form-container form button:not(.modal-dismiss) {
    inline-size: 100%;
    margin-inline: auto;
}

.form-group:has(.text-info-link) {
    text-align: center;
}

.text-info-link, small.text-danger {
    margin-block-start: .5rem;
}

main:has(.landing-section) ~ footer {
    display: none;
}

.manage {
    padding: 3rem;
}

    .manage, .manage .card-body {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

        .manage .card-body .form-control, hr {
            inline-size: 100%;
            max-inline-size: 50rem;
        }

        .manage .btn-secondary {
            background: var(--alert-color);
        }

@media (width<= 768px) {
    .login-form-container {
        inline-size: 100%;
    }

    .landing-decorator {
        display: none;
    }

    .btn + small {
        text-align: center;
    }
}