Variant with responsive properties inheriting a variant with (different) responsive properties does not inherit all values of responsive properties

[hmaracic]

Describe the bug
If a variant has responsive properties and inherits a variant with responsive properties, only the first value of the responsive property will be inherited.

To Reproduce
Steps to reproduce the behavior:

For a bare example of the bug please go to https://codesandbox.io/s/theme-ui-starter-forked-4zv15 and check out theme.js and index.js

Slide the preview window size, until text underline becomes text overline and vice-versa.

Expected behavior
A variant with responsive properties inherits all values of inherited responsive properties.

Applied to the above sandbox example, the expected behavior would be for the text to change size, color and decoration (not just the underline/overline).

Additional context
Documentation states that if a responsive property is inherited thru a variant, it can't be overriden with a simple property. This might be related, but I think it's a different use case from the one mentioned in the Caveats section on the Responsive Typograhpy page .

If the variant inheriting the responsive variant does not have any responsive properties, it will normally inherit all responsive values https://codesandbox.io/s/theme-ui-starter-forked-jgk49 (the size changes)

[lachlanjc]

Regarding the variants, Theme UI currently doesn't support combining multiple variants, which is why this isn't working. That work is happening in #1226.

I believe that's what's causing this issue, but there is also an issue of how component styles don't always override responsive variant styles, previously discussed in #1105 (more linked there). This isn't something Theme UI is doing wrong imo, because the variant media queries can have a higher specificity in CSS, so if they're not then overridden at the component level the variant styles will continue applying. If we "fixed" it (by not including media query styles if they're not re-defined/overriden by the component, which I don't prefer personally) it'd break sites in tons of ways too. I've yet to see a good solution to this problem.

[hmaracic]

It seems that #1226 talks about merging multiple variants together, however this issue occurs when a single variant at a time is inherited, though the inheritance hieararchy has multiple levels.

Also, the way I see #1105 and related, it seems the problem is when a (less-specific) child overrides the values of the parent. However, in the codebox example for this issue there is no overriding and the problem seems to be almost opposite, the child does not seem to inherit prop values for all breakpoints, only for the first one.

The version used for this was 0.3.5.