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

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

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

@media (prefers-color-scheme: dark) {
  .dd-banner {
    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;
}

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

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

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

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