<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);

?>
<section class="reasons section container">
    <?php if (!empty($arResult['PROPERTIES']['SECTION_TITLE']['VALUE'])): ?>
        <h2 class="section-title">
            <?= $arResult['PROPERTIES']['SECTION_TITLE']['~VALUE'] ?>
        </h2>
    <?php endif; ?>
    <div class="reasons__examples">
        <?php if (!empty($arResult['PROPERTIES']['CARD_LEFT']['VALUE'])): ?>
            <div class="reasons__lead">
                <span>
                    <?= $arResult['PROPERTIES']['CARD_LEFT']['~VALUE'] ?>
                </span>
            </div>
        <?php endif; ?>
        <?php if (!empty($arResult['PROPERTIES']['CARDS']['VALUE']) && is_array($arResult['PROPERTIES']['CARDS']['VALUE'])): ?>
        <div class="reasons__list">
            <?php foreach ($arResult['PROPERTIES']['CARDS']['~VALUE'] as $index => $value): ?>
                <div class="reasons__item hover-scale">
                    <div class="reasons__num">
                        <?= sprintf('%02d', $index + 1) ?>
                    </div>
                    <div class="reasons__text">
                        <?= $value ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>
</section>