<rh-card>: incorrect margins / breakpoints

[zeroedin]

@max-messmer reported in the update on RHDC from previous version of RHDS to 2.1.0 that rh-card appeared to have a smaller margin.

I believe the problem lies in at point we switched from @media queries to @container queries but didn't take into account that the swap wasn't as simple as a 1:1. The spacing guide (although itself having problems) shows a desktop size and a mobile size, the former with a margin-inline: 32px and later margin-inline: 24px. This break originally happened at a media query of 768px. However given a direct swap to @container this break point wouldn't be hit unless the card itself was that wide. Given the documentation my assumption is the correct fix for this would be to reduce the container query to:

@container card (min-width: 320px) {
  #header,
  #body,
  #footer {
    margin-inline: var(--rh-space-2xl, 32px);
  }

  #header,
  #body {
    margin-block-start: var(--rh-space-2xl, 32px);
  }

  #footer {
    margin-block-end: var(--rh-space-2xl, 32px);
  }
}

If the card then is less than 320px wide the margin-inline would reduce.

I created this codepen to demonstrate the issue

Thanks @max-messmer for reporting this issue.

[bennypowers]

We should confirm with @coreyvickery or @marionnegp what the correct behaviour should be, emphasizing the switch from "mobile vs desktop" to container size

[coreyvickery]

@zeroedin Easy to do 32px of padding on desktop (≥768px) and 24px of padding on mobile (≤768px)?

cc @bennypowers @marionnegp

[marionnegp]

@bennypowers @zeroedin, is there a reason it's better to do container queries than media queries for card? Switching to container queries kind of messes with stuff like tile too, which should have similar spacing to card.