Why is the $spacer variable defined using REM?

Discussed in https://github.com/twbs/bootstrap/discussions/35461

<div type='discussions-op-text'>

^{Originally posted by thenomadicmann December 2, 2021} What is the point of defining the $spacer variable using REM units instead of pixels? If a user changes their browser’s default font-size settings to be able to read text easier, they’ve also now increased margins and paddings which may crowd a design and possibly break a page layout. Why not reserve using REM for font-size? On a related note, in BS4, the grid gutter width, $grid-gutter-width, was set using pixels. In BS5 it switched to REM as well which causes the same unexpected behavior described above.</div>

[JSieffert]

@thenomadicmann

Without seeing everything at play here I can only guess what’s going on but it appears these two elements, class.card-img and class.card-img-overlay, are positioned. The card-img is essentially the background and the card-img-overlay is bottom-left aligned.

If I’m right, the bottom-left alignment is your issue. Align it from the top ensuring you leave enough space for the image to fully display and not cause the elements to overlap.

e.g. card-img-overlay { top: 15rem; left: 0;}

[asyncdesign]

Are you setting $font-size-root instead of $font-size-base somewhere ?