今風コードをお勉強中。
コンテナクエリで、簡易的にレスポンシブ対応をしてみました。

概要

特定のサイズ以下になったら「文字のサイズ」と「文字を覆うボックス」がスマホ用のものに切り替わるCSSです。

コード

html構成

<div class=”wrapper“>
　<div class=”box“>
　　<h1></h1>　〜〜〜他h2、h3、p
　</div>
</div>

CSS

@container sp (width < 500px)

「sp」という名前のコンテナ（切り替わるポイント）？
上記コードでは500px未満の場合、コンテナ内のコードが適応されます。
（sp＝命名可能な部分。スマートフォンの意味で名付けています）

container: sp / inline-size;

コンテナを適応させます（wrapperクラスで使用）。

• sp＝「sp」という名前のコンテナを適応させます。
• inline-size＝インライン幅（基本は横方向）の指定ですよ。の意（おそらく）。

以上

曖昧な点もありますが、以上のようにレスポンシブ構築をしてみました。