How to add subheadings in a different font to bitrix:menu?

Question

1C-Bitrix

Hello. The site privatlife.spb.ru has a menu that is formed from information blocks in the Catalogs type. The menu displays the icon and the name of the infoblock. It is necessary to make it so that under the Title in a different font, for example, the Description is displayed.
Below is the bitrix:menu component template code

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>


<?
// echo "<pre style=' height: 3000px; text-align: left;'>";
// print_r($arResult);
// echo "</pre>";
?>

<style>
  .menu_bLine ul li a:after, .menu_bLine ul li .active:after {
    background: none !important;
}
</style>


<?if (!empty($arResult)):?>

<ul>

<?
$num = 1;
foreach($arResult as $arItem):
  if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) 
    continue;
?>
  <li>
  <?if( stristr($APPLICATION->GetCurPage(false), $arItem["LINK"])):?>
    <a href="<?=$arItem["LINK"]?>" class="active item<?=$num?>1" style="padding-top: 15px" >
  <?else:?>
    <a href="<?=$arItem["LINK"]?>" class="item<?=$num?>1"  style="padding-top: 15px">
    
  <?endif?>

  <?
$URL = CFile::GetPath($arItem["PARAMS"]["IMG"]);
  ?>
  <div style=" height: 35px; width: auto; margin-bottom: 5px;">
    <img src="<?=$URL?>" alt="" style=" width: 30px;">
    
  </div>
    <?=$arItem["TEXT"]?> 

    </a>
    </li>
<? $num++; ?>
<?endforeach?>

</ul>
<?endif?>

And the .main.menu_ext.php file

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<?
CModule::IncludeModule("iblock");
$res = CIBlock::GetList(
    Array("SORT"=> "ASC"), 
    Array(
        'TYPE'=>'webstudiosamovar_realty_catalogs', 
        'SITE_ID'=>SITE_ID, 
        'ACTIVE'=>'Y', 
        
        
    ), true
);
while($ar_res = $res->Fetch())
{
    $aMenuLinks[] = array($ar_res['NAME'], "catalog/".$ar_res['CODE']."/", array(), array("IMG" => $ar_res["PICTURE"]));
}
?>