Fluid truly responsive text and spacing with calc in CSS

Fluid truly responsive text and spacing with calc in CSS

/* baseline sizes for use on screen width > 1699, want it fixed here */
// or you can use css clamp -- 
// https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/ */
// https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
.sidebar .top {
		margin-bottom: 22px;
		font-size: 16px;
		line-height: 24px;
}
  
/* resize relative to a 1700 width*/  
@media screen and (max-width: 1699px) {
	.sidebar .top {
		margin-bottom: calc( 0px + 22 * ( 100vw / 1700));
		font-size: calc( 0px + 16 * ( 100vw / 1700));
		line-height: calc( 0px + 24 * ( 100vw / 1700));
	}
}

/* reset resize rate once item becomes full width on narrower screen */  
@media screen and (max-width: 1105px) {
  .sidebar {width: 100%}
	.sidebar .top {
		margin-bottom: calc( 0px + 22 * ( 100vw / 1105));
		font-size: calc( 0px + 16 * ( 100vw / 1105));
		line-height: calc( 0px + 24 * ( 100vw / 1105));
	}
}