.auth-right-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-right-panel {
    position: relative;
    height: 100%;
    width: 100%;
    background: url("../img/logo/signup-bg.png") center center / cover no-repeat;
    border-radius: 1.75rem;
    overflow: hidden;
    box-shadow: 0 0.625rem 2rem rgba(14, 30, 64, 0.35), 0 0.125rem 0.5rem rgba(14, 30, 64, 0.25);
}

.auth-right-panel::before {
    content: "";
    position: absolute;
}

.auth-logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.auth-logo-overlay img {
    filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.3)); /* 0 2px 4px */
}

.brand-logo-left {
    width: 10rem;
    height: auto;
}

.brand-logo-overlay-img {
    width: 70%;
    max-width: 21.25rem;
    height: auto;
}

@media (min-width: 160rem) {
    .brand-logo-left {
        width: 18rem;
    }

    .auth-logo-overlay {
        width: 23rem;
    }

    .brand-logo-overlay-img {
        width: 100%;
        max-width: 20rem;
    }
}

@media (min-width: 240rem) {
    .brand-logo-left {
        width: 18rem;
    }

    .auth-logo-overlay {
        width: 20rem;
    }

    .brand-logo-overlay-img {
        width: 100%;
        max-width: 40rem;
    }
}

@media (max-width: 87.5rem) and (min-width: 62rem) {
    .auth-right-panel {
        height: 100%;
        width: 100%;
    }
}

@media (max-width: 75rem) and (min-width: 62rem) {
    .auth-right-panel {
        height: 100%;
        width: 100%;
    }
}

@media (max-width: 61.99875rem) {
    .auth-right-col {
        display: none;
    }
    .footer-links{
        margin-top: 6px;
    }
}

.auth-footer p {
    margin-bottom: 0.0625rem;
}

.auth-footer a {
    color: #464E78;
    font-size: 0.875rem;
    text-decoration: underline;
    margin-bottom: 0.0625rem;
}

.auth-footer {
    font-size: 0.875rem;
}

.main-container {
    width: 99.2%;
    height: min(95dvh, 68.75rem);
    display: flex;
    flex-direction: row;
}

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

@media (min-height: 68.8125rem) {
    .main-container {
        height: 95dvh;
    }

    @media (max-aspect-ratio: 4/3) {
        .main-container {
            width: 97.7%;
        }
    }
}

@media (min-width: 160rem) {
    .main-container {
        height: 95dvh;
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 4rem;
    }

    @media (max-aspect-ratio: 4/3) {
        .main-container {
            width: 98.5%;
        }
    }

    .main, .auth-right-col {
        flex: 1 1 0;
    }

    html {
        font-size: 1.6rem;
    }

    .auth-footer {
        font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
    }

    .auth-footer a {
        font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
    }

    .auth-footer div {
        line-height: 1.35;
    }
    .main-container {
        width: 98.5%;
        display: flex;
        flex-direction: row;
    }
}

@media (min-width: 240rem) {
    .main-container {
        gap: 2rem;
    }

    @media (max-aspect-ratio: 4/3) {
        .main-container {
            width: 98.6%;
        }
    }

    html {
        font-size: 1.25rem;
    }

    .auth-footer {
        font-size: clamp(1.1rem, 1rem + 0.3vw, 2.3rem);
    }

    .auth-footer a {
        font-size: clamp(1.1rem, 1rem + 0.3vw, 2.3rem);
    }

    .auth-footer div {
        line-height: 1.4;
    }

    .main-container {
        width: 98.6%;
        display: flex;
        flex-direction: row;
    }
}

@media (min-width: 137.5rem) and (max-width: 159.99rem) {
    /* ~2200px to <2560px */
    html {
        font-size: 1.1rem;
    }

    .brand-logo-left {
        width: 14rem;
    }

    .auth-logo-overlay {
        width: 16rem;
    }

    .brand-logo-overlay-img {
        max-width: 34rem;
    }

    .auth-footer {
        font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem);
    }

    .auth-footer a {
        font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem);
    }

    @media (max-aspect-ratio: 4/3) {
        .main-container {
            width: 99.2%;
        }
    }
}

html, body {
    height: 100%;
    min-height: 100dvh;
}