How to limit the output of categories from bitrix:catalog.section.list to a specific number?

Question

HTML

Good afternoon. There is a standard component bitrix:catalog.section.list. Now all categories of the first level with pictures are displayed. How to limit the output to the first 8 for example?
Component template code:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$this->setFrameMode(true);

$strSectionEdit = CIBlock::GetArrayByID($arParams["IBLOCK_ID"], "SECTION_EDIT");
$strSectionDelete = CIBlock::GetArrayByID($arParams["IBLOCK_ID"], "SECTION_DELETE");
$arSectionDeleteParams = array("CONFIRM" => GetMessage('CT_BCSL_ELEMENT_DELETE_CONFIRM'));

?><div class="catalog-category-mini__holder"><?
if ('Y' == $arParams['SHOW_PARENT_NAME'] && 0 < $arResult['SECTION']['ID'])
{
  $this->AddEditAction($arResult['SECTION']['ID'], $arResult['SECTION']['EDIT_LINK'], $strSectionEdit);
  $this->AddDeleteAction($arResult['SECTION']['ID'], $arResult['SECTION']['DELETE_LINK'], $strSectionDelete, $arSectionDeleteParams);

  ?><h1
    class="<? echo $arCurView['TITLE']; ?>"
    id="<? echo $this->GetEditAreaId($arResult['SECTION']['ID']); ?>"
  ><a href="<? echo $arResult['SECTION']['SECTION_PAGE_URL']; ?>"><?
    echo (
      isset($arResult['SECTION']["IPROPERTY_VALUES"]["SECTION_PAGE_TITLE"]) && $arResult['SECTION']["IPROPERTY_VALUES"]["SECTION_PAGE_TITLE"] != ""
      ? $arResult['SECTION']["IPROPERTY_VALUES"]["SECTION_PAGE_TITLE"]
      : $arResult['SECTION']['NAME']
    );
  ?></a></h1><?
}
if (0 < $arResult["SECTIONS_COUNT"])
{
?>
<?
  switch ($arParams['VIEW_MODE'])
  {
    case 'LINE':
      foreach ($arResult['SECTIONS'] as &$arSection)
      {
        $this->AddEditAction($arSection['ID'], $arSection['EDIT_LINK'], $strSectionEdit);
        $this->AddDeleteAction($arSection['ID'], $arSection['DELETE_LINK'], $strSectionDelete, $arSectionDeleteParams);

        if (false === $arSection['PICTURE'])
          $arSection['PICTURE'] = array(
            'SRC' => $arCurView['EMPTY_IMG'],
            'ALT' => (
              '' != $arSection["IPROPERTY_VALUES"]["SECTION_PICTURE_FILE_ALT"]
              ? $arSection["IPROPERTY_VALUES"]["SECTION_PICTURE_FILE_ALT"]
              : $arSection["NAME"]
            ),
            'TITLE' => (
              '' != $arSection["IPROPERTY_VALUES"]["SECTION_PICTURE_FILE_TITLE"]
              ? $arSection["IPROPERTY_VALUES"]["SECTION_PICTURE_FILE_TITLE"]
              : $arSection["NAME"]
            )
          );
        ?>
        <div class="catalog-category-mini__item" id="<? echo $this->GetEditAreaId($arSection['ID']); ?>">

        <a href="<? echo $arSection['SECTION_PAGE_URL']; ?>" class="catalog-category-mini__text" title="<? echo $arSection['PICTURE']['TITLE']; ?>">
          <img src="<? echo $arSection['PICTURE']['SRC']; ?>" alt="<? echo $arSection['PICTURE']['TITLE']; ?>" class="catalog-category-mini__img">
        </a>
        <a href="<? echo $arSection['SECTION_PAGE_URL']; ?>" class="catalog-category-mini__text" title="<? echo $arSection['PICTURE']['TITLE']; ?>"><? echo $arSection['NAME']; ?></a>

        <?
        if ($arParams["COUNT_ELEMENTS"])
        {
          ?> <span>(<? echo $arSection['ELEMENT_CNT']; ?>)</span><?
        }
        
        if ('' != $arSection['DESCRIPTION'])
        {
          ?><p><? echo $arSection['DESCRIPTION']; ?></p><?
        }
        ?>
        </div>
        <?
      }
      unset($arSection);
      break;
  }
?>
<?
  echo ('LINE' != $arParams['VIEW_MODE'] ? '<div style="clear: both;"></div>' : '');
}
?></div>

Have a nice day, everyone!

Answer 1

$i = 0;
foreach ($arResult['SECTIONS'] as &$arSection)
{
     ...
     if(++$i == 8)
    {
        break;
    }
}

Answer 2

I did similar. In the component template in the result_modifier.php file, you make a selection using GetList. Before overwriting $arSection into the $arResult["SECTION"] array, you drive the number of sections you need.