<? 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="page-section page-section--dark" data-animate-variability="parent">
    <div class="variability">
        <div class="container">
            <div class="variability__inner">
                <div class="variability__top">
                    <div class="section-title section-title--dark">
                        <div class="section-title__wrap">
                            <p class="section-title__badge"><?=$arResult['TAG']?></p>
                            <h2 data-animate="title" class="title title--h2 section-title__title"><?=$arResult['TITLE']?></h2>
                        </div>

                    </div>
                </div>
                <div class="variability__list-container">
                    <div class="variability__list-wrap swiper" data-animate-variability="wrap">
                        <ul class="variability__list swiper-wrapper" data-animate-variability="scroll">
                            <? foreach ($arResult['ITEMS'] as  $arItem){
                                $img = CFile::GetPath($arItem["PROPERTIES"]['IMG']["VALUE"]);
                                $img768 = CFile::GetPath($arItem["PROPERTIES"]['IMG_768']["VALUE"]);
                                $img767 = CFile::GetPath($arItem["PROPERTIES"]['IMG_767']["VALUE"]);
                                $imgHover = CFile::GetPath($arItem["PROPERTIES"]['IMG']["VALUE"]);
                                $imgHover768 = CFile::GetPath($arItem["PROPERTIES"]['IMG_HOVER_768']["VALUE"]);
                                $imgHover767 = CFile::GetPath($arItem["PROPERTIES"]['IMG_HOVER_767']["VALUE"]);

                                ?>
                                <li class="variability__item swiper-slide" data-animate-variability="item">
                                <div class="variability-card">
                                    <div class="variability-card__bg variability-card__bg--def">

                                        <picture>
                                            <source media="(min-width: 768px)"
                                                    srcset="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability-xl.webp,
    <?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability-xl@2x.webp 2x, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability-xl@3x.webp 3x"
                                                    type="image/webp">
                                            <source media="(max-width: 767px)"
                                                    srcset="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability.webp, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability@2x.webp 2x, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability@3x.webp 3x"
                                                    type="image/webp">
                                            <img src="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability.png"
                                                 srcset="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability@2x.png 2x, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability@3x.png 3x"
                                                 alt="Картинка" width="309" height="389" loading="eager">
                                        </picture>

                                    </div>
                                    <div class="variability-card__bg variability-card__bg--hover">
                                        <picture>
                                            <source media="(min-width: 768px)"
                                                    srcset="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability-hover-xl.webp, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability-hover-xl@2x.webp 2x, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability-hover-xl@3x.webp 3x"
                                                    type="image/webp">

                                            <source media="(max-width: 767px)"
                                                    srcset="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability-hover.webp, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability-hover@2x.webp 2x, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability-hover@3x.webp 3x"
                                                    type="image/webp">
                                            <img src="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability-hover.png"
                                                 srcset="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability-hover@2x.png 2x, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-variability-hover@3x.png 3x"
                                                 alt="Картинка" width="309" height="389" loading="eager">
                                        </picture>

                                    </div>
                                    <div class="variability-card__inner">
                                        <div class="variability-card__image-wrap">
                                            <div class="variability-card__image variability-card__image--def">
                                                <picture>
                                                    <source media="(min-width: 768px)"
                                                            srcset="<?= $img768 ?>"
                                                            type="image/webp">
                                                    <source media="(max-width: 767px)"
                                                            srcset="<?= $img767 ?>"
                                                            type="image/webp">
                                                    <img src="<?= $img ?>"
                                                         srcset="<?= $img ?>"
                                                         alt="Картинка" width="300" height="300" loading="eager">
                                                </picture>

                                            </div>
                                            <div class="variability-card__image variability-card__image--hover">
                                                <picture>
                                                    <source media="(min-width: 768px)"
                                                            srcset="<?= $imgHover768 ?>"
                                                            type="image/webp">
                                                    <source media="(max-width: 767px)"
                                                            srcset="<?= $imgHover767 ?>"
                                                            type="image/webp">
                                                    <img src="<?= $imgHover ?>"
                                                         srcset="<?= $imgHover ?>"
                                                         alt="Картинка" width="300" height="300" loading="eager">
                                                </picture>


                                            </div>
                                        </div>
                                        <div class="variability-card__content">
                                            <h3><?=$arItem['NAME']?></h3>
                                            <p><?=$arItem['PREVIEW_TEXT']?></p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <?}?>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

</section>
