Margin missing between image and caption in docs

[bcheidemann]

https://www.gemini-ui.dev/components/image/#caption

The margin between the image and caption in the docs seems to be overridden:

[nowf41]

The "margin-top" property was set to 0.5rem when I add "!important" annotation to this section at a style tag.

.gx-figure-caption{/**here**/margin-top:.5rem!important;
font-size:.875rem;line-height:1.25rem;color:#a0aec0;text-align:center}.gx-image{--gx-mouse-distance: 0;--shadow-size: max(8px, min(24px, calc(1000px / (1 + var(--gx-mouse-distance))))) ;position:relative;margin:.5px;background-color:#23262d;box-shadow:#fff3 0 0 6px,#8a65f013 0 0 var(--shadow-size) 6px;border-radius:4px;border:.5px solid rgba(255,255,255,.2)}

[bcheidemann]

The "margin-top" property was set to 0.5rem when I add "!important" annotation to this section at a style tag.

.gx-figure-caption{/**here**/margin-top:.5rem!important;
font-size:.875rem;line-height:1.25rem;color:#a0aec0;text-align:center}.gx-image{--gx-mouse-distance: 0;--shadow-size: max(8px, min(24px, calc(1000px / (1 + var(--gx-mouse-distance))))) ;position:relative;margin:.5px;background-color:#23262d;box-shadow:#fff3 0 0 6px,#8a65f013 0 0 var(--shadow-size) 6px;border-radius:4px;border:.5px solid rgba(255,255,255,.2)}

Thanks for looking into this @nowf41 🙂 Ideally we wouldn't add !important annotations to our CSS, since it requires users to also add an !important declaration if they need to customise the styles of the component. It seems as though the margin-top is being overridden by Astro Live Code. Maybe there's some other way to fix this which doesn't involve making changes to the component CSS.

[nowf41]

@bcheidemann thanks for reviewing. how about to include the external CSS file after the