CSS увеличение отступа от размера шрифта нелинейного

Question

У меня есть элемент, который имеет padding на основе font-size с использованием единицы em. Но мне нужно увеличивать отступ на 5px каждый раз, когда font-size увеличение на 1px. Я даже не уверен, возможно ли это с помощью функции calc() или другим способом?

.test {
  font-size: 16px;
  padding: 1.875em;
  border: 1px solid red;
}

@media (min-width: 300px) {
  .test {
    font-size: 17px;
  }
}

@media (min-width: 600px) {
  .test {
    font-size: 18px;
  }
}

<div class="test">
  <span>Lorem Ipsum</span>
</div>

Моя цель не в том, чтобы писать media-queries внутри элемента / компонента, это должно зависеть только от размера шрифта его родителя.

Answer 1

Если ваш размер шрифта и, следовательно, 1em увеличивается на 1px, а отступ должен увеличиться на 5px для каждого пикселя с размером шрифта выше 16px, отступ должен быть calc(1.875 * 16px + ((1em - 16px) * 5)) - исходный отступ в 16px (1.875 * 16px) плюс разница размера шрифта в 16 пикселей в 5 раз.