.root {
    composes: gap-x-2xs from global;
    composes: gap-y-sm from global;
    composes: grid from global;
    composes: grid-cols-2 from global;
    composes: w-full from global;
}

.field {
    composes: col-end-span2 from global;
}

.email,
.passwordLabel {
    composes: field;
}

.buttons {
    composes: field;
    composes: gap-xs from global;
    composes: grid from global;
    composes: grid-flow-col from global;
    composes: justify-self-center from global;
    composes: p-xs from global;
}

.changePasswordButtonContainer {
    composes: pt-xs from global;
}

@media screen(-lg) {
    .firstname,
    .lastname,
    .password,
    .newPassword {
        grid-column: 1 / span 2;
    }
}