Styling of the "Active groups" component: group type to appear closer to group name

[koalie]

(Link updated to point to beta site)
(entered based on comment from @ianbjacobs)

Describe the issue
I think you have a goal of emphasizing the name of the group and de-emphasizing the group type. I think this is a good idea, but the rendering separates the group type so much that I find I am doing extra work because it looks almost like another entry.

URL
https://beta.w3.org/ecosystems/e-commerce/ and all of the Business Ecosystems pages where the "Active groups" component is used.

Recommended solution
In the mockup below, I propose to move the group type closer to the name, but reduce its prominence (here, done with italic font-style and #333 color instead of black.
You can compare the two styles in the mockup below. This has a secondary benefit of reducing the total height of the title block (but without causing the text to be cramped).

[gosko]

If revising these styles, another low priority improvement would be to add some padding between the border and text when collapsible elements are selected. Currently, the border is right up against the text.

[NicolaSaunders]

I agree with closing the gap and the colour change recommended above, but I would advise against the use of italicised text as this could make it harder for some people to read.

This can be achieved by adjusting the span styles at /assets-src/styles/sass/60-advanced-components/_collapsibles.scss to remove margin-top and add the #333 color.

In this same file, changing padding: 0; to padding: rem(3); on line 19 should give the text breathing space, as pointed out by @gosko