Как сделать динамический отступ в margin через «clamp»?

Question

[San Manjiro]

Можно ли как-то сделать так, чтобы уменьшение контейнера происходило быстрее не меняя значение vw.

.container__products {
margin-top: clamp(30px, 9vw, 90px);
}

Мне надо, чтобы значение менялось от 1000px, получается 90px - это 9vw от 1000px. Проблема в том, что уменьшение заканчивается на 320px, а мне надо, чтобы уже на 700px значение было 30px. Пробовал расчитывать через calc по формуле:

margin-top: clamp(30px, calc(9vw + (700px - 100vw) * 0.06), 90px);

, но ничего не получается.

Answer 1

[Михаил Р.]

Попробуйте так:

.container__products {
  margin-top: clamp(
    30px, 
    calc(9vw + (1000px - 100vw) * 0.06), 
    90px
  );
}

или сложнее:

:root {
  --min-margin: 30px;
  --max-margin: 90px;
  --min-width: 700px;
  --max-width: 1000px;
}

.container__products {
  margin-top: clamp(
    var(--min-margin), 
    calc(
      var(--min-margin) + 
      (var(--max-margin) - var(--min-margin)) * 
      ((100vw - var(--min-width)) / (var(--max-width) - var(--min-width)))
    ), 
    var(--max-margin)
  );
}

Comments

[San Manjiro]

самая первая форму почти правильная, чтобы отстпу успел уменьшится до 700px приглось умножить на -0,2, как я понял поиграв этим значение можно добится нужного результата.

margin-top: clamp(30px, calc(9vw + (1000px - 100vw) * -0.2), 90px);