CSS calcを使って位置しているのにスマホ幅を縮めると縦位置がズレてしまい困っています。。

実現したいこと

画像の上にテキストを乗せ、テキストがどんなスマホの横幅でも
適切な位置に配置するようCSSを組みたいです。。

発生している問題・分からないこと

テキストの縦位置がデバイス幅によってズレてしまいます。

該当のソースコード

HTML

1<div class="relative" data-type="visibility"> 2<img alt="" src="img/sec05.webp" /> 3<p class="member_count">12,345<span class="small">人</span></p> 4</div>

CSS

1.relative {2 position: relative;3}4 5.member_count {6 position: absolute;7 width: min(calc((407 / 750) * 100vw), 407px);8 top: min(calc((805 / 750) * 100vw), 805px);9 left: 50%;10 transform: translateX(-50%);11 color: #3DAADF;12 text-align: center;13 font-family: "Noto Sans JP";14 font-size: min(calc((110.999/ 750) * 100vw), 110.999px);15 font-style: normal;16 font-weight: bold;17 line-height: 172.419px;18 letter-spacing: -2.995px;19}20 21.member_count .small {22 font-size: min(calc((60/ 750) * 100vw), 60px);23 font-weight: 900;24 display: inline;25}

試したこと・調べたこと

上記の詳細・結果

他の箇所で注釈やスライダーを画像の上に載せる形で実装させているのですが、それらは縦位置がズレておらず、CSSも同じなので原因がわからずに困っています。。

calの記述にこだわりがあるわけじゃないので、全く別の書き方でも解決できれば構いません。
スマホで縦位置のズレない良いCSSがなにかほかにあればご教示いただけますと幸いです。

補足

症状は添付画像の通りです。
2つの画面スクショを1枚画像に添付しており、内容は以下の通りです。
上のスクショ：Chromeのデベロッパーツール上でスマホ表示（モバイルL425px）に切り替えたとき
下のスクショ：PCブラウザで表示させたとき(つまり横幅100%表示)

※モバイルLから小さくしていくにつれてテキストは最適な位置よりもどんどん下にズレていきます。。
※横幅750以上であれば想定通りの位置に表示できますが、749px以下から下にズレてしまいます。
※ほかの注釈やスライダーについてはレスポンシブにサイズ、位置ともに可変できています。