main.register {
    display: flex;
    gap: 1rem;

    padding: 1rem;
}

/* banner */

main.register > div.banner {
    width: 100%;
    min-height: calc(100svh - (1rem * 2));

    background: var(--color-dark);

    border-radius: 1rem;
}

/* form */

main.register > div.form {
    width: 100%;
    min-height: calc(100svh - (1rem * 2));

    display: flex;
    justify-content: center;
    align-items: center;
}

main.register > div.form div.container {
    max-width: 25rem;
}

main.register > div.form div.title h1 {
    font-size: 2rem;
    font-weight: 500;
}

main.register > div.form span.login-call {
    text-align: center;

    display: block;

    color: var(--color-dark-64);
}

main.register > div.form span.login-call > a {
    color: var(--color-dark);

    text-decoration: underline;
}

main.register > div.form div.secure-password {
    padding-top: .75rem;
}

main.register > div.form div.secure-password ul li {
    display: flex;
    align-items: center;
    gap: .5rem;

    font-size: .875rem;
}

main.register > div.form div.secure-password ul li > i {
    color: var(--color-dark-24);
}

main.register > div.form div.secure-password ul li.done > i {
    color: var(--color-green);
}

main.register > div.form label.terms {
    color: var(--color-dark);
}

main.register > div.form label.terms > a {
    color: var(--color-primary);

    font-weight: 500;
}