fluid-capsize.css

:root {
  --root-font-size: 16;
  --root-line-height: 1.2;
  font-size: var(--root-font-size);
  line-height: var(--root-line-height);
}

.font-inter {
  --cap-height: 2048;
  --ascent: 2728;
  --descent: -680;
  --line-gap: 0;
  --units-per-em: 2816;
  --x-height: 1536;

  font-family: 'Inter var', system-ui;
}

.text {
  --min-font-size: 24;
  --min-screen-size: 360;

  --max-font-size: 36;
  --max-screen-size: 1440;

  font-size: clamp(
    var(--min-font-size) / var(--root-font-size) * 1rem,
    (var(--v) * 1vw) + ((var(--r) / var(--root-font-size)) * 1rem),
    var(--max-font-size) / var(--root-font-size) * 1rem
  );

  --line-height: 1.25;
  line-height: var(--line-height);
}

.fluid-capsize {
  --font-size: var(--min-font-size);

  --line-height-numeric: calc(
    var(--font-size) * var(--line-height, var(--root-line-height))
  );

  --absolute-descent: max(var(--descent), -1 * var(--descent));
  --cap-height-scale: calc(var(--cap-height) / var(--units-per-em));
  --descent-scale: calc(var(--absolute-descent) / var(--units-per-em));
  --ascent-scale: calc(var(--ascent) / var(--units-per-em));
  --line-gap-scale: calc(var(--line-gap) / var(--units-per-em));

  --content-area: calc(
    var(--ascent) + var(--line-gap) + var(--absolute-descent)
  );
  --line-height-scale: calc(var(--content-area) / var(--units-per-em));
  --line-height-normal: calc(var(--line-height-scale) * var(--font-size));

  --specified-line-height-offset: calc(
    (var(--line-height-normal) - var(--line-height-numeric)) / 2
  );

  --cap-height-trim-param: calc(
    var(--ascent-scale) - var(--cap-height-scale) + var(--line-gap-scale) / 2
  );
  --cap-height-trim: calc(
    var(--cap-height-trim-param) - var(--specified-line-height-offset) /
      var(--font-size)
  );

  --baseline-trim-param: calc(var(--descent-scale) + var(--line-gap-scale) / 2);
  --baseline-trim: calc(
    var(--baseline-trim-param) - var(--specified-line-height-offset) /
      var(--font-size)
  );

  --v-numerator: calc(100 * (var(--max-font-size) - var(--min-font-size)));
  --v-denominator: calc(var(--max-screen-size) - var(--min-screen-size));
  --v: calc(var(--v-numerator) / var(--v-denominator));

  --r-numerator: calc(
    (var(--min-screen-size) * var(--max-font-size)) -
      (var(--max-screen-size) * var(--min-font-size))
  );
  --r-denominator: calc(var(--min-screen-size) - var(--max-screen-size));
  --r: calc(var(--r-numerator) / var(--r-denominator));
}

.fluid-capsize::before {
  content: '';
  display: table;
  margin-bottom: calc(var(--cap-height-trim) * -1em);
}

.fluid-capsize::after {
  content: '';
  display: table;
  margin-top: calc(var(--baseline-trim) * -1em);
}

.no-capsize::before,
.no-capsize::after {
  content: none;
}

Nice bro. Just what I needed :)