html, body {
    height: 100%;
    margin: 0;
}

.login-page-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100%;
    transition: grid-template-columns 0.3s ease;
}

.login-header {
   display:none;
}

.login-container {
    display: contents;
}

.MMALogoDiv {
    position: absolute;
    top: 2rem;
    left: 2rem;
}

.ImageContainer {
    background: url(images/CPLoginImage.png) center/cover no-repeat;
    grid-column: 1/2;
    border-right: 12px solid #00968F;
    background-position: center top 15%;
    transition: width 0.3s ease, background-position 0.3s ease;
}

.LoginContent {
    position: relative;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.LoginContent::-webkit-scrollbar {
    display: none;
}

.LoginForm {
    max-width: 25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 5.25rem;
}

@media (min-width: 768px) and (max-width: 1199px) {

    .login-page-container {
        grid-template-columns: 19.4375rem 1fr;
    }

    .ImageContainer {
        background-size: cover;
        width: 19.4375rem;
        background-position: center left 40%;
    }
}

@media (max-width: 767px) {

    .login-header {
        display: flex;
        align-items: center;
        padding: 1rem;
    }

    .login-page-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .ImageContainer {
        max-height: 22.6875rem;
        min-height: clamp(13.6875rem, 35vw, 18rem);
        border-right: none;
        width: auto;
        background-position: center 15%;
        transition: min-height 0.3s ease, max-height 0.3s ease;
    }

    .LoginContent {
        padding: 1rem;
    }

    .LoginForm {
        margin-top: 0rem;
        width: auto;
    }

    .MMALogoDiv {
        display: none;
    }
}

@media (min-width: 451px) and (max-width: 767px) {
    .ImageContainer {
        background-position: left top 15%;
        min-height: clamp(20rem, 40vw, 25rem);
    }
}