.root {
    composes: gap-x-xs 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;
}

.formMessage,
.email,
.country,
.street0,
.street1,
.city,
.region,
.postcode,
.telephone {
    composes: field;
}

.defaultShipping {
    composes: field;

    composes: pt-xs from global;
}

.firstname,
.lastname {
    composes: col-end-span1 from global;
}

.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;
}

@media screen(-lg) {
    .regionError {
        color: brown;
        font-weight: 600;
    }

    .firstname {
        grid-column: 1 / span 2;
    }

    .lastname {
        grid-column: 1 / span 2;
    }
}