CSS Variable --search-result-gap doesn't seem to work on mobile when set in custom CSS

lajawi

I have below CSS snippet in my custom CSS (there's more, but I have simplified it for this issue). The variable --search-result-gap works on desktop, but not on mobile (iOS). No matter how high or low I set this variable, the search results are stuck together.

:root {
	--search-result-gap: 16px;
}

I expect the variable --search-result-gap to work on both desktop and mobile.