Googleログインボタンを自作する場合のパディング

CSS初心者です。的外れな質問してたらすみません。

Googleアカウントによるソーシャルログインのボタンを作成しました。

Googleの規約によると、自アプリに合わせる場合も色やアイコンの使い方など、一定の規約がありました。

この中で気になるのが「パディング」の項目です。
ログインにおけるブランドの取り扱いガイドライン「パディング」

テキストの左右へのパディングは 8 dp にします。ロゴは 18 dp にし、ロゴとボタンテキストの間隔は 24 dp にします。

この部分が何度読み返しても理解できません。

レスポンシブでボタンサイズが変わっても、この指定されたパディングサイズじゃないといけないのでしょうか？

それともフォントはサイズ14pxの時の例でしょうか？
であれば、例えばフォントサイズを2倍の28pxにする場合は、各パディングも2倍とすれば良いのでしょうか？

ちなみにボタンは以下のように作成しました。

html
1<a href="#" class="sns-login-btn-google">Googleでログイン</a>

css
1
2.sns-login-btn-google{
3  padding: 0.5em;
4  display: block;
5  color: #898989 !important;
6  background: #ffffff;
7  text-decoration: none;
8  font-weight: bold;
9  font-size:18px;
10  border-radius: 3px;
11  text-align:center;
12  text-decoration:none !important;
13	border: solid;
14	border-color: #898989;
15	border-width: 0.5px;
16}
17.sns-login-btn-google:before {
18  content: "";
19  display: inline-block;
20  width: 20px;
21  height: 20px;
22  margin: -3px 24px 0 0;
23  background: url("https://developers.google.com/identity/images/g-logo.png?hl=ja") no-repeat;
24  background-size: contain;
25  vertical-align: middle;
26}
27.sns-login-btn-google:hover {
28  background: #ffffff;
29}
30
31
32@media screen and (min-width: 768px){
33  .sns-login-btn-google{
34    padding: 0.5em 0.6em;
35    font-size:20px;
36    display:inline-block;
37  }
38  .sns-login-btn-google:before {
39    margin: -3px 24px 0 0;
40  }
41}
42