FIT HEIGHT TO BACKGROUND PATTERN SIZE WITH CALC-SIZE()

Summary from the TLDR Design newsletter

CSS background patterns can end awkwardly when a container's content produces a height that isn't an exact multiple of the background tile, while `background-repeat: round` fixes the edge by distorting the pattern itself. Combining `calc-size()` with `round()` instead lets the browser calculate the element's natural height and round it up to the nearest multiple of the tile height. The result behaves similarly to `min-height`, preserving both the content-driven size and the original pattern proportions, though browser support remains limited.