.sections-list__item {
  background: #fff;
  background: var(--card_bg_black);
}
.sections-list__item-link {
  padding: 18px 28px 18px 24px;
  max-width: 320px;
  display: block;
}
.sections-list__item-image-wrapper {
  --section-image-width: 40px;
  --section-image-height: 40px;
  --section-image-offset: 24px;<?if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();?>
<?$this->setFrameMode(true);?>
<?if($arResult['ITEMS']):?>
	<?
	$currentBannerIndex = intval($arParams['CURRENT_BANNER_INDEX']) > 0 ? intval($arParams['CURRENT_BANNER_INDEX']) - 1 : 0;

	$templateData = array(
		'BANNERS_COUNT' => count($arResult['ITEMS']),
		'CURRENT_BANNER_INDEX' => $currentBannerIndex,
		'CURRENT_BANNER_COLOR' => '',
	);

	$bannerMobile = $arParams['BIGBANNER_MOBILE'];
	$bHideOnNarrow = $arParams['BIGBANNER_HIDEONNARROW'] === 'Y';
	$slideshowSpeed = abs(intval($arParams['BIGBANNER_SLIDESSHOWSPEED']));
	$animationSpeed = abs(intval($arParams['BIGBANNER_ANIMATIONSPEED']));
	$bAnimation = $slideshowSpeed && strlen($arParams['BIGBANNER_ANIMATIONTYPE']);
	$bOneSlide = count($arResult['ITEMS']) == 1;
	if($arParams['BIGBANNER_ANIMATIONTYPE'] === 'FADE'){
		$animationType = 'fade';
	}
	else{
		$animationType = 'slide';
		$animationDirection = 'horizontal';
		if($arParams['BIGBANNER_ANIMATIONTYPE'] === 'SLIDE_VERTICAL'){
			$animationDirection = 'vertical';
		}
	}

	$bBgImage = !$arParams['IMG_POSITION'] || $arParams['IMG_POSITION'] == 'COVER';
	$bWideText = $arParams['WIDE_TEXT'];
	$sliderItems = $arParams['SLIDER_ITEMS'] ? $arParams['SLIDER_ITEMS'] : 1;
	$bSmallPreview = $sliderItems > 1 || $arResult['HAS_CHILD_BANNERS'];

	$bLowBanner = $arParams['HEIGHT_BANNER'] === 'LOW';
	$bNormalBanner = $arParams['HEIGHT_BANNER'] === 'NORMAL';
	$bHighBanner = !$bLowBanner && !$bNormalBanner;

	$titleSizeClass = 'font_42 font_large';	
	if($bHighBanner){
		$titleSizeClass = $bWideText ? ' font_70 font_large' : ' font_56 font_large';
	} else if($bNormalBanner){
		$titleSizeClass = $bWideText ? 'font_56 font_large' : ' font_48 font_large';
	} else if($bLowBanner){
		$titleSizeClass = $bWideText ? 'font_50 font_large' : ' font_42 font_large';
	}

	$bannerClasses = ' swipeignore';
	if($bHighBanner) {
		$bannerClasses .= ' banners-big--high';
	}
	else{
		$bannerClasses .= ' banners-big--nothigh';

		if($bNormalBanner) {
			$bannerClasses .= ' banners-big--normal';
		}
		else {
			$bannerClasses .= ' banners-big--low';
		}
	}
	if($arParams['NARROW_BANNER']) {
		$bannerClasses .= ' banners-big--narrow';
	}
	if($sliderItems > 1) {
		$bannerClasses .= ' banners-big--multi-slide';
	}
	if(!$arParams['NO_OFFSET_BANNER']) {
		$bannerClasses .= ' banners-big--paddings';
	}
	if($arResult['HAS_CHILD_BANNERS']) {
		$bannerClasses .= ' banners-big--side-banners';
	}
	if($sliderItems < 2) {
		$bannerClasses .= ' banners-big--adaptive-'.$bannerMobile;
	} else {
		$bannerClasses .= ' banners-big--adaptive-1';
	}
	if($arParams['IMG_POSITION'] == 'SQUARE') {
		$bannerClasses .= ' banners-big--img-square';
	}

	$carouselClasses = 'banners-big__depend-height';

	if (!$arParams['HEADER_OPACITY']) {
		$bannerClasses .= ' banners-no-header-opacity';
	} else {
		$carouselClasses .= ' banners-big__depend-padding';
	}

	if($arParams['ALL_WIDTH_BUTTONS']) {
		$carouselClasses .= ' owl-carousel--button-wide';
	} else {
		$carouselClasses .= ' owl-carousel--button-bottom-right';
	}
	if($arParams['HEADER_OPACITY']) {
		$carouselClasses .= ' owl-carousel--button-maxwidth-theme';
	}
	if(!$arParams['HEADER_OPACITY'] && !$arParams['NARROW_BANNER'] && $arParams['IMG_POSITION'] != 'SQUARE') {
		$carouselClasses .= ' owl-carousel--button-maxwidth-theme';
	}
	if($sliderItems > 1) {
		$carouselClasses .= ' owl-carousel--button-offset-32';
	}
	if($arResult['HAS_CHILD_BANNERS'] || $arParams['IMG_POSITION'] == 'SQUARE') {
		$carouselClasses .= ' owl-carousel--button-bottom-right-32-1200';
	}
	$carouselClasses .= ' owl-carousel--light';

	$bShowH1 = false;
	?>
	<?
	$arOptions = [
		// Disable preloading of all images
		'preloadImages' => false,
		// Enable lazy loading
		'lazy' => [
			'loadPrevNext' => true,
		],
		//enable hash navigation
  		// 'hashNavigation' =>  true,
		//   'loopFillGroupWithBlank' => true,
		'keyboard' => true,
		'init' => false,
		'countSlides' => count($arResult["ITEMS"]),
		'type' => 'main_banner'
	];
	if ($arOptions['countSlides'] > 10) {
		$arOptions['pagination']['dynamicBullets'] = true;
		$arOptions['pagination']['dynamicMainBullets'] = 3;
	}
	if ($arOptions['countSlides'] > 1) {
		$arOptions['loop'] = true;
	}
	$swiperLazyClass = 'swiper-lazy';
	$swiperDataLazyload = 'data-lazyload';
	if(!$arParams['NO_OFFSET_BANNER']){
		$arOptions['spaceBetween'] = 24;
	}
	if($arOptions['countSlides'] > 1) {
		$arOptions['slidesPerView'] = 'auto';
		$arOptions['pagination' ] = [
			'el' => '.swiper-pagination',
			'type' => 'bullets',
		];
		$swiperLazyClass = '';
		$swiperDataLazyload = '';
	}
	?>
	<div class="banners-big front<?=($bHideOnNarrow ? ' hidden_narrow' : '')?> <?=$bannerClasses?>">
		<div class="maxwidth-banner <?=$arParams['NARROW_BANNER'] ? 'maxwidth-theme' : ''?>">
			<div class="banners-big__wrapper">
				<div class="swiper slider-solution main-slider <?=$carouselClasses?>"  data-plugin-options='<?=json_encode($arOptions)?>'>
					<div class="swiper-wrapper main-slider__wrapper">
					<?foreach($arResult['ITEMS'] as $i => $arItem):?>
						<?/*<div class="banners-big__item-wrapper">*/?>
							<?
							$this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem['IBLOCK_ID'], 'ELEMENT_EDIT'));
							$this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem['IBLOCK_ID'], 'ELEMENT_DELETE'), array('CONFIRM' => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
							$bHasUrl = boolval(strlen($arItem["PROPERTIES"]["LINKIMG"]["VALUE"]));
							$target = $arItem["PROPERTIES"]["TARGETS"]["VALUE_XML_ID"];

							$imageBgSrc = $this->GetFolder().'/images/background.jpg';

							if (is_array($arItem['DETAIL_PICTURE'])) {
								$imageBgSrc = $arItem['DETAIL_PICTURE']['SRC'];
							}
							if (!$bHighBanner && $arItem['PROPERTIES']['NORMAL_BG_IMAGE']['VALUE']) {
								$imageBgSrc = CFile::GetPath($arItem['PROPERTIES']['NORMAL_BG_IMAGE']['VALUE']);
							}
							if ($bLowBanner && $arItem['PROPERTIES']['LOW_BG_IMAGE']['VALUE']) {
								$imageBgSrc = CFile::GetPath($arItem['PROPERTIES']['LOW_BG_IMAGE']['VALUE']);
							}

							$type = $arItem['PROPERTIES']['BANNERTYPE']['VALUE_XML_ID'];
							$bOnlyImage = $type == 'T1' || !$type;
							$bLinkOnName = strlen($arItem['PROPERTIES']['LINKIMG']['VALUE']);
							$bOpacity = $arItem['PROPERTIES']['BANNER_OPACITY']['VALUE_XML_ID'] == 'Y';
							$bCenterText = $arItem['PROPERTIES']['TEXT_CENTER']['VALUE_XML_ID'] == 'Y';

							if($sliderItems < 2) {
								include('video.php');
							}

							$itemSlideClasses = '';
							if(!$arParams['HEADER_OPACITY'] && !($arParams['NO_OFFSET_BANNER'] && !$arParams['NARROW_BANNER'])) {
								$itemSlideClasses .= ' rounded-x';
							}

							$bannerColor = $arItem['PROPERTIES']['MAIN_COLOR']['VALUE'] ? $arItem['PROPERTIES']['MAIN_COLOR']['VALUE_XML_ID'] : '';

							$bannerItemClasses = '';
							if($bShowVideo) {
								$bannerItemClasses .= ' vvideo';
							}							
							if($bannerColor) {
								if($arParams['IMG_POSITION'] == 'SQUARE') {
									$bannerItemClasses .= ' banners-big__item--'.$bannerColor.'-767';
									$bannerItemClasses .= ' banners-big__item--video-half';
								} else {
									$bannerItemClasses .= ' banners-big__item--'.$bannerColor;
								}
							}
							if($sliderItems > 1) {
								$bannerItemClasses .= ' banners-big__item--opacity-bottom';
								$bannerItemClasses .= ' banners-big__item--light';
							}else if($bOpacity) {
								if($arParams['IMG_POSITION'] == 'SQUARE'){
									$bannerItemClasses .= ' banners-big__item--opacity-767';
								}
								else{
									$bannerItemClasses .= ' banners-big__item--opacity';
								}
							}

							$bannerInnerClasses = '';
							if($arParams['INNER_PADDING_NARROW'] && $arParams['NARROW_BANNER']) {
								$bannerInnerClasses .= ' banners-big__inner--padding-left-narrow';
							}
							if($type == 'T3') {
								$bannerInnerClasses .= ' banners-big__inner--righttext';
							}
							if($arParams['IMG_POSITION'] == 'SQUARE') {
								$bannerInnerClasses .= 'banners-big__inner--paddings-24-767';
							}

							// first visible slide is the first item or $currentBannerIndex
							// saving his color for to usage in component_epilog
							if (
								$bannerColor &&
								(
									$i == $currentBannerIndex ||
									!$i
								)
							) {
								$templateData['CURRENT_BANNER_COLOR'] = $bannerColor;
							}
							?>
							<?$needShowBG = $arParams['IMG_POSITION'] == 'SQUARE' && $bOnlyImage;?>
							<div class="swiper-slide main-slider__item box <?=$itemSlideClasses?> <?=$swiperLazyClass;?> <?=($bShowVideo ? 'vvideo' : '');?>" 
								style="background-image: url('<?=$imageBgSrc?>'); width: 1201px; margin-right: 24px;"
								data-slide_index="<?=$i?>" 
								<?=($bannerColor ? ' data-color="'.$bannerColor.'"' : '')?> 
								<?=$videoInfoItem?>
							>
								<div class="<?=($bHasUrl ? ' wurl' : '')?> banners-big__item  banners-big__depend-height <?=(!$arParams['HEADER_OPACITY'] ? '' : 'banners-big__depend-padding');?> <?=$bannerItemClasses?> <?=$bOnlyImage && $bShowVideo ? 'banners-big__item--img-with-video' : '';?>">
									<?if($bHasUrl):?>
										<a class="target" href="<?=$arItem["PROPERTIES"]["LINKIMG"]["VALUE"]?>" <?=(strlen($target) ? 'target="'.$target.'"' : '')?>></a>
									<?endif;?>
									<div id="<?=$this->GetEditAreaId($arItem['ID'])?>" class="<?=$arParams['NO_MAXWITH_THEME_WIDE'] ? '' : 'maxwidth-theme'?> banners-big__inner-wrap pos-static <?=($bOnlyImage && $bLinkOnName ? ' fulla' : '')?> <?=($bVideoAutoStart ? 'loading' : '');?>" <?=$bannerMobile == 2 && ($bBgImage || $needShowBG) ? 'style="background-image:url('.$imageBgSrc .') !important;"' : ''?>>
										<div class="banners-big__inner <?=$bannerInnerClasses?>">
											<?$name = ($arItem['DETAIL_TEXT'] ? $arItem['DETAIL_TEXT'] : strip_tags($arItem["~NAME"], "<br><br/>"));?>
											<?ob_start();?>
											<?if(!$bOnlyImage):?>
												<?if($bLinkOnName):?>
													<a href="<?=$arItem['PROPERTIES']['LINKIMG']['VALUE']?>" class="banners-big__title-link">
														<?php if($i === 0): ?>
															<h1 class="<?=$titleSizeClass?>">Склад сплит систем и кондиционеров</h1>
														<?php else: ?>
															<div class="banners-big__title switcher-title <?=$titleSizeClass?>"><?=$name?></div>
														<?php endif; ?>
													</a>
												<?endif;?>

												<?if($bLinkOnName):?>
													</a>
												<?endif;?>

												<div class="banners-big__text-wrapper <?=$bWideText && !$bCenterText && $type !== "T3" ? 'banners-big__text-wrapper--row' : ''?>">
													<?if(strlen($arItem['PREVIEW_TEXT'])):?>
														<div class="banners-big__text-block <?=$bSmallPreview ? 'banners-big__text-block--small' : ''?> <?=$textClass?>">
															<?=$arItem['PREVIEW_TEXT']?>
														</div>
													<?endif;?>
												</div>

												<?include('buttons.php');?>
											<?endif;?>
											<?$text = ob_get_clean();?>

											<?ob_start();?>
												<?
												$image = false;
												if(is_array($arItem['PREVIEW_PICTURE']) && array_key_exists('SRC', $arItem['PREVIEW_PICTURE']) ) {
													$image = $arItem['PREVIEW_PICTURE'];
												}
												if(!$bHighBanner && $arItem['PROPERTIES']['NORMAL_BANNER_IMAGE']['VALUE']) {
													$image = CFile::GetFileArray($arItem['PROPERTIES']['NORMAL_BANNER_IMAGE']['VALUE']);
												}
												if($bLowBanner && $arItem['PROPERTIES']['LOW_BANNER_IMAGE']['VALUE']) {
													$image = CFile::GetFileArray($arItem['PROPERTIES']['LOW_BANNER_IMAGE']['VALUE']);
												}
												?>
												<?if($image):?>
													<?
														$arImage1080 = CFile::ResizeImageGet($image['ID'], array('width' => 1080, 'height' => 10000), BX_RESIZE_IMAGE_PROPORTIONAL_ALT);
													?>
													<?if($bLinkOnName):?>
														<a href="<?=$arItem['PROPERTIES']['LINKIMG']['VALUE']?>" class="image">
													<?endif;?>
															<img class="<?=$i === 0 ? '' : $swiperLazyClass;?> plaxy banners-big__img <?=$arParams['IMG_POSITION'] == 'SQUARE' ? 'banners-big__img--center' : ''?>" 
																<?if($i === 0):?>
																	src="<?= $arImage1080['src']; ?>"
																<?else:?>
																	<?if($swiperLazyClass):?>data-src="<?= $arImage1080['src']; ?>"<?else:?>src="<?= $arImage1080['src']; ?>"<?endif;?>
																<?endif;?>
																alt="<?=($image['ALT'] ?: $arItem['FORMAT_NAME'])?>" 
																title="<?=($image['TITLE'] ?: $arItem['FORMAT_NAME'])?>" 
															/>
													<?if($bLinkOnName):?>
														</a>
													<?endif;?>

												<?endif;?>
											<?$img = ob_get_clean();?>

											<?if(!$bOnlyImage):?>
												<div class="banners-big__text <?=$bWideText && $type !== "T3" ?  'banners-big__text--wide' : ''?> <?=$bCenterText ? 'banners-big__text--center' : ''?> <?=$sliderItems > 1 ? 'banners-big__text--bottom' : 'banners-big__depend-height'?> <?=$arParams['TEXT_PADDING_RIGHT'] ? 'banners-big__text--padding-right' : ''?> <?=$arParams['TEXT_PADDING_LEFT_WIDE'] && !$arParams['NARROW_BANNER'] ? ' banners-big__text--padding-left-wide' : ''?> <?=$arParams['TEXT_PADDING_LEFT_NARROW'] && $arParams['NARROW_BANNER'] ? ' banners-big__text--padding-left-narrow' : ''?>">
													<?=$text?>
												</div>
												<?if($image || $arParams['IMG_POSITION'] == 'SQUARE'):?>
													<?if($i == $currentBannerIndex):?>
														<link href="<?=$imageBgSrc?>" rel="preload" as="image">
													<?endif;?>

													<div class="banners-big__img-wrapper banners-big__depend-height <?=$bWideText && $type !== "T3"  ? 'banners-big__img-wrapper--back-right' : ''?> <?=$sliderItems > 1 ? 'banners-big__img-wrapper--back-center' : ''?> <?=$arParams['IMG_POSITION'] == 'SQUARE' ? 'banners-big__img-wrapper--square' : ''?>" <?=$arParams['IMG_POSITION'] == 'SQUARE' ? 'style="background-image: url('.$imageBgSrc.');"' : ''?>>
														<?=$image ? $img : ''?>
													</div>
												<?endif;?>
											<?elseif($bOnlyImage):?>
												<?if($bLinkOnName):?>
													<a href="<?=$arItem['PROPERTIES']['LINKIMG']['VALUE']?>"></a>
												<?endif;?>
												<?if($bShowVideo):?>
													<div class="video_block only_img--video ">
														<span class="play btn-video bg-theme-after <?=($bVideoAutoStart ? 'loading' : '');?> <?=$buttonVideoClass;?>" title="<?=$buttonVideoText?>"></span>
													</div>
												<?endif;?>
											<?endif;?>
										</div>

									</div>
									<?if($sliderItems < 2):?>
										<?if($bannerMobile == 2):?>
											<?if(strlen($text)):?>
												<div class="banners-big__adaptive-block">
													<?=$text?>
												</div>
											<?endif;?>
										<?elseif($bannerMobile == 3):?>
											<?$tabletImgSrc = ($arItem["PROPERTIES"]['TABLET_IMAGE']['VALUE'] ? CFile::GetPath($arItem["PROPERTIES"]['TABLET_IMAGE']['VALUE']) : $imageBgSrc);?>
											<?if($i == $currentBannerIndex):?>
												<link href="<?=$tabletImgSrc?>" rel="preload" as="image" media="(max-width: 767px)">
											<?endif;?>
											<div 
												class="banners-big__adaptive-img <?=$i === 0 ? '' : $swiperLazyClass;?>" 
												style="background-image:url(<?=$tabletImgSrc?>);"
												<?if($i !== 0):?>
													data-background="<?=$tabletImgSrc;?>"
													<?=$swiperDataLazyload;?>
												<?endif;?>
											></div>
										<?endif;?>
									<?endif;?>
								</div>
							</div>

							<?//from here?>

						<?/*</div>*/?>
					<?endforeach;?>
					</div>
					<?
					$dotsClasses = '';
					?>
					<?if ($arOptions['countSlides'] > 1):?>
						<div class = "maxwidth-theme banners-big__nav-wrap">
							<?//if($sliderItems <= 1):?>
								<div class="swiper-pagination swiper-pagination--flex <?=$dotsClasses;?>"></div>
							<?/*else:?>
								<?\TSolution\Functions::getDotsHTML(count($arResult['ITEMS']),  $dotsClasses, $slideshowSpeed);?>
							<?endif;*/?>
							<div class="slider-nav-wrap">
								<div class="slider-nav slider-nav--static swiper-button-prev"><?=TSolution::showSpriteIconSvg(SITE_TEMPLATE_PATH.'/images/svg/arrows.svg#left-7-12', 'stroke-dark-light', ['WIDTH' => 7,'HEIGHT' => 12]);?></div>
								<div class="slider-nav slider-nav--static swiper-button-next"><?=TSolution::showSpriteIconSvg(SITE_TEMPLATE_PATH.'/images/svg/arrows.svg#right-7-12', 'stroke-dark-light', ['WIDTH' => 7,'HEIGHT' => 12]);?></div>
							</div>
						</div>
					<?endif;?>
				<?/*</div>*/?>
				</div>
			</div>
		</div>
	</div>
<?endif;?>

  width: var(--section-image-width);
  height: var(--section-image-height);
  margin-right: var(--section-image-offset);

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sections-list__item-image {
  max-width: 100%;
  max-height: 100%;
}
.sections-list__item-image-wrapper--ICONS svg {
  width: var(--section-image-width);
  height: var(--section-image-height);
}
.sections-list__item-image-wrapper--LINK {
  background-color: rgba(136, 136, 136, 0.1);
}
.sections-list__item-link:hover .arrow * {
  stroke: #fff;
}
.sections-list__item-text {
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: clamp(0.875rem, 0.6875rem + 0.5vw, 1rem);
}

@media (max-width: 600px) {
  /*.sections-list__wrapper {
    flex-basis: 100%;
  }*/
  .mobile-scrolled .sections-list__wrapper {
    flex-basis: auto;
  }
  .sections-list__item-link {
    padding: 12px 16px 12px 16px;
  }
  .sections-list__item-image-wrapper {
    --section-image-offset: 16px;
  }
}