jQeuryUIのリサイズと、CSSメディアクエリの組み合わせ方

###前提・実現したいこと
左右に分かれたページがありjQueryUIで幅を可変的にしています。

この場合のCSSメディアクエリの書き方についてアドバイス頂けませんでしょうか。

###発生している問題
端的に申しますと、一見したCSSのわかりにくさを懸念していまして、実例として以下の該当のソースコードをご用意致しました。

右側ピンクにある要素.ageを、ピンクの幅に応じて表示切替したいのですが、

ピンクの幅を示す.is_over768{}
画面全体の幅を示す@media (min-width: 768px) {}

という２つのCSSを書かないといけなくなってしまい、これが一見してわかりにくいのではないかという懸念です。

###該当のソースコード
CSSをご覧いただくとわかるように、メディアクエリの@media (min-width: 768px) {}という指定の次に、.is_over768{}で:not()とかを使わねばならず、わかりにくいと感じます。

下記をjsfiddleで実行する

html
1<div class="flex">
2	<div id="left" class="ui-widget-content">
3	</div>
4	<div id="main">
5		<ul class="lists">
6			<li>
7				<div class="box">
8					<p class="name">一郎</p>
9					<p class="age">10歳</p>
10				</div>
11			</li>
12			<li>
13				<div class="box">
14					<p class="name">二郎</p>
15					<p class="age">20歳</p>
16				</div>
17			</li>      
18		</ul>
19	</div>
20</div>

css
1p {
2	margin: 0;
3}
4.flex {
5	display: flex;
6	height: 100vh;
7}
8#main {
9	min-width: 200px;
10	width: 100%;
11	background: lightpink;
12}
13#left {
14	min-width: 200px;
15	background: aquamarine;
16}
17
18
19/*
20	要素 `.age` について
21	PC(768px以上)で表示し
22	スマホ(768未満)で非表示にしたいが
23	下記のように複雑になってしまいます
24*/
25#main .box .age {
26	display: none;
27}
28@media (min-width: 768px) {
29	#main .box .age {	
30		display: block;
31	}	
32}
33#main:not(.is_over768) .box .age {
34	display: none;
35}
36
37

jQuery
1function myResizable(){
2	$( "#left" ).resizable({
3		handles: "e",
4		minWidth: 200,
5		maxWidth  : $(window).width() - 200,
6		resize: function (event, ui) {
7			setClasses();
8		},    
9	});
10}
11
12$(document).ready(function(){
13	myResizable();
14	setClasses();
15});
16
17$(document).on('resize',function(){
18	myResizable();
19	setClasses();
20});
21
22
23function setClasses(){
24
25	// サイズ取得
26	const widthWindow = $('.flex').width();
27	const widthLeft   = $('#left').width(); 
28	const widthMain   = widthWindow - widthLeft;
29
30	// 左エリアのクラス
31	if ( widthLeft < 768 ) {
32		$('#left').removeClass('is_over768 is_over1024');
33	} else if( widthLeft >= 768 ) {
34		$('#left').addClass('is_over768');
35	} else if( widthLeft >= 1024 ) {
36		$('#left').addClass('is_over1024');
37	}	
38
39	// メインエリアのクラス
40	if ( widthMain < 768 ) {
41		$('#main').removeClass('is_over768 is_over1024');
42	} else if ( widthMain >= 768 ) {
43		$('#main').addClass('is_over768');
44	} else if ( widthMain >= 1024 ) {
45		$('#main').addClass('is_over1024');
46	}	
47}
48