Swellボタン内のテキストがデバイスによっては2行になってしまうため、フォントサイズを自動調整できるようにする方法を探しています。

サンプルとして下のボタンを作成しました。ボタンとしては正常に動作しますが、フォントサイズがレスポンシブになっていません。

<div class="swell-block-button is-style-btn_normal -size-l"><a href="http://yahoo.co.jp" class="swell-block-button__link"><span>ボタンのテキスト</span></a></div>

ケース1.

以下のようにSPAN要素にスタイルを追加すると、「このブロックには、想定されていないか無効なコンテンツが含まれています。」というエラーが発生します。

<div class="swell-block-button is-style-btn_normal -size-l"><a href="http://yahoo.co.jp" class="swell-block-button__link"><span style="font-size:clamp(0.1rem,0.8rem,2rem);">ボタンのテキスト</span></a></div>

ケース2.

次に以下のようにSPAN要素にIDを付与してみましたが、同じエラーが返ってきます。

<div class="swell-block-button is-style-btn_normal -size-l"><a href="http://yahoo.co.jp" class="swell-block-button__link"><span id="btn_text">ボタンのテキスト</span></a></div>

ケース3.

ちなみに、DIV要素にIDを付与したところ、エラーは発生しませんでした。id="btn_text"の代わりに上記のstyle="font..."を入力すると同じエラーが発生します。

<div class="swell-block-button is-style-btn_normal -size-l" id="btn_text"><a href="http://yahoo.co.jp" class="swell-block-button__link"><span>ボタンのテキスト</span></a></div>

なぜエラーが発生するのか、理由が分からず解決方法をご存知の方は教えていただけないでしょうか？

また、目的はボタン内のフォントサイズが動的に変わるようになることなので、他に方法があればぜひご教示いただきたけないでしょうか？

お手数をおかけしますが、宜しくお願い致します。