.template-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;

    & .grid {
        display: grid;
        grid-template-columns: 0.75fr 1fr;
        gap: 2.4rem;
        padding: 6.4rem 2.4rem;
        max-width: 100ch;

        @media (max-width: 800px) {
            grid-template-columns: minmax(0, auto);
        }

        & h1 {
            grid-column: 1 / -1;

            font-size: 175%;
            font-weight: 700;
        }

        & #template-login-form {
            display: flex;
            flex-direction: column;

            & button {
                max-width: max-content;
            }

            & hr {
                margin-bottom: 0.5lh;
            }

            & .action {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                gap: 1.6rem;
            }

            & .forgot-password {
                color: color-mix(in srgb, var(--background-color), var(--text-color) 75%);
            }

            & output {
                padding-top: 0.5lh;

                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;

                &.error::before {
                    content: "";
                    display: block;
                    width: 2.4rem;
                    height: 2.4rem;
                    flex-shrink: 0;

                    background-repeat: no-repeat;
                    background-size: cover;
                    background-image: var(--icon-error);
                }
            }
        }

        & .info {
            display: block;
            max-width: 50ch;
        }
    }
}