Динамический/адаптивный размер шрифта

<div class="page">
	<div class="container">
		<h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex doloremque quasi rem velit animi repudiandae iusto?</h1>
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam animi earum excepturi esse, fugit asperiores dolore eveniet, voluptatibus nesciunt id adipisci facilis veniam blanditiis placeat quas voluptatem corporis! Numquam maxime iste molestias pariatur repellendus, quis ad voluptas sint, soluta veritatis reiciendis explicabo consequatur in delectus quisquam voluptate nulla, commodi vel dolore inventore. Dicta nobis quo qui? Sit at consectetur recusandae suscipit soluta dolores sequi veritatis sapiente, assumenda vitae ipsam neque ut nulla doloremque cupiditate magnam placeat eligendi! Ex tenetur itaque modi saepe accusamus laboriosam ipsum voluptatum nisi non repudiandae veniam consequuntur optio tempore, laborum fuga? Dolore enim ut exercitationem, sed aut sint earum odit ex quo adipisci impedit eligendi delectus, eum doloremque culpa maxime quas reprehenderit labore tempora, voluptas laboriosam. Vel magnam dolores, ipsa error aperiam obcaecati inventore.</p>
		<div class="card">
			<h2>TEXT OF TITLE</h2>
		</div>
	</div>
</div>

h1{
	--max: 32px;
	--min: 20px;
	// font-size: clamp(var(--min), calc(1vw *  2.4),  var(--max));
	font-size: clamp(var(--min), calc(100vw / 1024 *  24),  var(--max));
	// от МИН шрифта -> ширина БРЕЙКПОИНТ и нужный РАЗМЕР -> до МАКС шрифта
}
p{
	--min: 14px;
	--max: 18px;
	// font-size: clamp(var(--min), calc(1vw * 1.6),  var(--max));
	font-size: clamp(var(--min), calc(100vw / 1024 * 16),  var(--max));
}
h2{
	text-align: center;
	--min: 32px;
	--max: 64px;
	font-size: clamp(var(--min), calc(100vw / 768 * 40), var(--max));
}