counterの数字部分だけ文字を大きくしたいです。

現在、CSSのcounter機能を使った自動ナンバリングを使ってコーディングしています。
CSSの.number:beforeのcontentに書いてあるNumberという文字は18pxで、counterの数字部分は24pxにしたいのですが、可能でしょうか？

HTML
1<body>
2    <div class="d-flex">
3        <p class="number"></p>
4        <h1 class="align-self-center w-100">タイトル</h1>
5    </div>
6    <div class="d-flex">
7        <p class="number"></p>
8        <h1 class="align-self-center w-100">タイトル</h1>
9    </div>
10    <div class="d-flex">
11        <p class="number"></p>
12        <h1 class="align-self-center w-100">タイトル</h1>
13    </div>
14    <div class="d-flex">
15        <p class="number"></p>
16        <h1 class="align-self-center w-100">タイトル</h1>
17    </div>
18    <div class="d-flex">
19        <p class="number"></p>
20        <h1 class="align-self-center w-100">タイトル</h1>
21    </div>
22</body>

CSS
1
2body {
3    counter-reset: number 0;/* number のカウンタを 0 にセット */
4}
5
6.number{
7    width: 100px;
8    height: 90px;
9    position: relative;
10    background-color: #A69994;
11    border-radius: 50%;
12    box-sizing: border-box;
13    text-align: center;
14    padding-top: -20px;
15    padding-bottom: -20px;
16    font-size: 18px;
17}
18
19.number:before {
20    counter-increment: number 1;      /* number カウンタを増加 */
21    content: "Number\A" counter(number);
22    white-space: pre;
23}