/* P85-AUTH-LAYOUT-R5: desktop top-left overlay / stacked true page-bottom action. */
.auth-composition {
    display: contents;
}

.auth-primary-column {
    min-width: 0;
    width: 100%;
    align-self: center;
}

.auth-primary-column > .auth-panel {
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 68.01rem) {
    .auth-primary-column {
        position: relative;
    }

    .auth-primary-column > .auth-back-home {
        position: absolute;
        inset: 1rem auto auto 1rem;
        z-index: 2;
        display: inline-flex;
        width: fit-content;
        max-width: calc(100% - 2rem);
        min-height: 2.25rem;
        margin: 0;
        gap: .24rem;
        padding: .4rem .42rem;
        font-size: .74rem;
        box-shadow: none;
    }

    .register-scene .register-panel {
        transform: none;
    }
}

@media (min-width: 68.01rem) and (min-height: 58.76rem) {
    .register-scene .auth-primary-column {
        transform: translateY(2.25rem);
    }
}

@media (min-width: 100rem) and (min-height: 58.76rem) {
    .register-scene .auth-primary-column {
        transform: none;
    }
}

@media (max-width: 68rem) {
    .auth-scene.login-scene,
    .auth-scene.register-scene {
        padding-bottom: 5.75rem;
    }

    .auth-primary-column {
        display: contents;
    }

    .auth-panel {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .auth-primary-column > .auth-back-home {
        position: absolute;
        inset: auto auto 1rem 50%;
        z-index: 2;
        display: flex;
        width: min(calc(100% - 2rem), 44.25rem);
        max-width: 100%;
        min-height: 2.75rem;
        justify-content: center;
        margin: 0;
        padding-inline: 1.1rem;
        border-color: rgba(211, 232, 255, .16);
        background: rgba(5, 16, 28, .24);
        box-shadow: none;
        transform: translateX(-50%);
    }

    .auth-primary-column > .auth-back-home:hover,
    .auth-primary-column > .auth-back-home:focus-visible {
        transform: translateX(-50%) translateY(-1px);
    }
}

@media (max-width: 34rem) {
    .auth-grid,
    .hero-copy,
    .auth-panel {
        width: 100%;
        max-width: none;
    }

    .auth-primary-column > .auth-back-home {
        width: calc(100% - 2rem);
        min-height: 3rem;
    }
}