WordPress│メディアクエリを使わずにレスポンシブレイアウトにする方法

<div class="button-wrapper">
   <a href="https://motoki-design.co.jp/wordpress/contact/" class="button-contact">お問い合わせへ</a>
</div>

.button-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    max-width: 480px;
    margin: 3em auto;
}

.button-contact {
    padding: 0.9em 2em;
    border: 1px solid #333;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.button-contact:hover {
    background-color: #333;
    color: #fff;
}

/* ボタンのラッパー(グリッド)のスタイル定義 */
.button-wrapper {
    display: grid;  /* グリッドレイアウトを適用 */
    /* 各ボタンの幅を最小250pxから最大利用可能な全幅に設定 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    max-width: 480px;  /* ラッパーの最大幅を480pxに設定 */
    margin: 3em auto;  /* 上下に3emのマージンを持ち、左右は中央寄せ */
}

/* ボタン自体のスタイル定義 */
.button-contact {
    padding: 0.9em 2em;  /* 内部のパディング */
    border: 1px solid #333;  /* ボタンの境界線 */
    border-radius: 5px;  /* 角を丸くする */
    background-color: #fff;  /* 初期の背景色 */
    color: #333;  /* 初期の文字色 */
    text-align: center;  /* テキストを中央寄せ */
    text-decoration: none;  /* アンダーラインを取り除く */
    /* 色の遷移を0.3秒でスムーズに変化させる */
    transition: background-color 0.3s, color 0.3s; 
}

/* ボタンにマウスを載せたときのスタイル */
.button-contact:hover {
    background-color: #333;  /* ホバー時の背景色を黒色に変更 */
    color: #fff;  /* ホバー時の文字色を白色に変更 */
}