Landing page responding to 4 different screen sizes

There's a couple of slightly different buttons in this challenge. What's the best approach for organizing these small differences in css?

My solution is to make a class button for the white one, and a modifier button-accent for the pink one. (i use bem with camelCase & single dash/hiphen) Both include different styling for various screen sizes. But the pink button is slightly different in some cases: a bit wider or has smaller text while keeping the same height. I reflected these changes in additional contextual classes: hero_button & cta_button.