Landing page responding to 4 different screen sizes

That's a great quest Alex and I like your solution!

I'd either do it that way, so add another modifier classes, or maybe I'd make it contextual in the sense of "When my button-accent is in my hero section apply these extra styles.

It kinda depends on the design which one will give the appropriate flexibility, but I think both work well. Your take on it I feel is more predictable and understandable, but making it depend on the wrapping div I feel makes it easier for me not to mess it up. No classes on the button I can forget to apply in different pages.