[jQuery3.5.1] 文字の大・中・小を制御する

<body>
	<div class="container">
		<div class="row">
			<button class="btn-s">小</button>
			<button class="btn-m">中</button>
			<button class="btn-l">大</button>
		</div>
		<div class="row">
			<div class="col">
				<p>ボタンクリックで文字の大きさが変わります</p>
			</div>
		</div>
	</div>
	<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
	<script>
		$(function(){
			$('.btn-s').click(function(){
				$("p").css('font-size','0.5em');
			});
			$('.btn-m').click(function(){
				$("p").css('font-size','1em');
			});
			$('.btn-l').click(function(){
				$("p").css('font-size','1.5em');
			});
		})
	</script>
</body>

なんか難しいことやってるのかと思ったら、割と単純でワロタw