.dd-banner-wrap {
  width: 100%;
  max-width: 1168px;
  height: var(--dd-banner-height, 350px);
  margin: 0 auto;
  overflow: hidden;
  background: #ffffff;
}

/* НИЧЕГО НЕ СКРЫВАЕМ.
   Скрытие на мобильном пусть делает Битрикс / шаблон сайта. */

.dd-banner {
  position: relative;
  width: 100%;
  max-width: 1168px;
  height: var(--dd-banner-height, 350px);
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

/* 
  СОЛИДНАЯ ПОДЛОЖКА.
  Она всегда занимает 100% текущего размера баннера.
  Не двигается, не масштабируется как картинки, не участвует в JS.
*/
.dd-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .dd-banner-wrap {
    background: #1b1b1b;
  }

  .dd-banner::before {
    background: #1b1b1b;
  }
}

/*
  Каждый слой живёт в нативной системе 1168×350.
  Контейнер может быть уже и ниже, но слой остаётся 1168×350
  и обрезается через overflow: hidden.
*/
.dd-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 1168px;
  height: 350px;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
}

.dd-layer img,
img.dd-layer {
  display: block;
  width: 1168px;
  height: 350px;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

/* Тонирование фоновых слоёв bkg1 и bkg2 */
.dd-layer-bkg1::after,
.dd-layer-bkg2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: var(--dd-layer-tint-opacity, 0);
  pointer-events: none;
}

/* В тёмной теме тонируем цветом фона тёмного сайта */
@media (prefers-color-scheme: dark) {
  .dd-layer-bkg1::after,
  .dd-layer-bkg2::after {
    background: #1b1b1b;
  }
}

/* Порядок слоёв */
.dd-layer-bkg1 {
  z-index: 1;
}

.dd-layer-bkg2 {
  z-index: 2;
}

.dd-layer-device1 {
  z-index: 3;
}

.dd-layer-device2 {
  z-index: 4;
}