/*
 * Блок «Экран кейса» — свёрстанная подача экранов сайта в кейсе.
 * Три независимых слоя: фон (.cs__bg) → устройство (.cs-browser / .cs-laptop / .cs-tablet / .cs-phone / .cs-flat)
 * → слот с картинкой или видео (.cs-media). Раскладка задаётся классом cs--<layout> на корне.
 * Все размеры внутри — в долях ширины блока (cqw), поэтому композиция одинаково выглядит на любой ширине.
 * Ширина устройства — переменная --dw (в процентах ширины блока).
 */

.cs {
  --cs-bg: #0c0c0c;
  --cs-ratio: 1880 / 1440;
  --cs-radius: 5px;
  --cs-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, .45);
  --cs-line: rgba(255, 255, 255, .07);
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  border-radius: var(--cs-radius);
  background: var(--cs-bg);
  aspect-ratio: var(--cs-ratio);
  isolation: isolate;
  grid-column: 1 / -1;
}

.cs--light {
  --cs-shadow: 0 2cqw 5cqw rgba(20, 24, 40, .16);
  --cs-line: rgba(0, 0, 0, .06);
}

.cs--narrow {
  width: 100%;
  max-width: 124.6rem;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
}

.cs--fullwidth {
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
}

/* ---------- Фон ---------- */

.cs__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.cs__bg .cs-media {
  object-position: var(--cs-pos, 50% 50%);
}

.cs__bg-shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--cs-shade, 0));
}

/* сетка тонких линий, как в кейсе Duplex */
.cs--grid .cs__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--cs-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cs-line) 1px, transparent 1px);
  background-size: calc(100cqw / 8) calc(100cqw / 8);
  background-position: calc(100cqw / 16) calc(100cqw / 16);
}

/* ---------- Сцена и слоты ---------- */

.cs__stage {
  position: absolute;
  inset: 0;
}

.cs__item {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: calc(var(--dw) * 1cqw);
  transform: translate(-50%, -50%);
  z-index: var(--z, 1);
}

.cs-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  display: block;
}

/* обрезка сверху — когда в записи экрана осталась шапка браузера или статус-бар */
.cs-media[style*="--crop"] {
  top: calc(var(--crop) * -1);
  height: calc(100% + var(--crop));
}

.cs-screen {
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
  aspect-ratio: var(--sr, 16 / 10);
}

/* ---------- Плоский экран (без устройства) ---------- */

.cs-flat {
  border-radius: calc(var(--dw) * .004cqw + 2px);
  overflow: hidden;
  box-shadow: var(--cs-shadow);
}

/* ---------- Браузер ---------- */

.cs-browser {
  border-radius: calc(var(--dw) * .008cqw + 2px);
  overflow: hidden;
  background: #f1f1f3;
  box-shadow: var(--cs-shadow);
}

.cs-browser__bar {
  display: flex;
  align-items: center;
  gap: calc(var(--dw) * .006cqw);
  height: calc(var(--dw) * .032cqw);
  padding: 0 calc(var(--dw) * .014cqw);
}

.cs-browser__bar i {
  width: calc(var(--dw) * .009cqw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d4d4d8;
}

.cs-browser__bar b {
  flex: 0 1 34%;
  height: 56%;
  margin: 0 auto;
  border-radius: 99px;
  background: #fff;
  font: 500 calc(var(--dw) * .0095cqw) / 1 var(--inter-display, sans-serif);
  color: #8a8a8f;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

.cs--dark .cs-browser {
  background: #232325;
}

.cs--dark .cs-browser__bar i {
  background: #48484c;
}

.cs--dark .cs-browser__bar b {
  background: #303033;
  color: #8e8e93;
}

/* ---------- Ноутбук ---------- */

.cs-laptop__lid {
  position: relative;
  padding: calc(var(--dw) * .022cqw) calc(var(--dw) * .022cqw) calc(var(--dw) * .03cqw);
  background: #0d0d0e;
  border-radius: calc(var(--dw) * .03cqw) calc(var(--dw) * .03cqw) 0 0;
  box-shadow: inset 0 0 0 calc(var(--dw) * .0035cqw) #2d2d30;
}

.cs-laptop__lid::before {
  /* камера */
  content: "";
  position: absolute;
  top: calc(var(--dw) * .009cqw);
  left: 50%;
  width: calc(var(--dw) * .006cqw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #26272b;
  transform: translateX(-50%);
}

.cs-laptop .cs-screen {
  border-radius: calc(var(--dw) * .006cqw);
}

.cs-laptop__base {
  position: relative;
  width: 114%;
  margin-left: -7%;
  height: calc(var(--dw) * .028cqw);
  border-radius: 0 0 calc(var(--dw) * .05cqw) calc(var(--dw) * .05cqw) / 0 0 calc(var(--dw) * .025cqw) calc(var(--dw) * .025cqw);
  background: linear-gradient(#e6e7ea 0 22%, #c9cace 40%, #8d8f94 100%);
  box-shadow: 0 calc(var(--dw) * .03cqw) calc(var(--dw) * .06cqw) rgba(0, 0, 0, .35);
}

.cs-laptop__base::before {
  /* выемка для открытия крышки */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15%;
  height: 30%;
  transform: translateX(-50%);
  border-radius: 0 0 calc(var(--dw) * .012cqw) calc(var(--dw) * .012cqw);
  background: linear-gradient(#b9babe, #d6d7da);
}

/* ---------- Планшет ---------- */

.cs-tablet {
  padding: calc(var(--dw) * .03cqw);
  background: #111113;
  border-radius: calc(var(--dw) * .06cqw);
  box-shadow: inset 0 0 0 calc(var(--dw) * .005cqw) #3a3a3d, var(--cs-shadow);
}

.cs-tablet .cs-screen {
  --sr: 4 / 3;
  border-radius: calc(var(--dw) * .025cqw);
}

.cs-tablet--portrait .cs-screen {
  --sr: 3 / 4;
}

/* ---------- Телефон ---------- */

.cs-phone {
  position: relative;
  padding: calc(var(--dw) * .04cqw);
  background: #0b0b0c;
  border-radius: calc(var(--dw) * .17cqw);
  box-shadow:
    inset 0 0 0 calc(var(--dw) * .012cqw) #3b3b3e,
    inset 0 0 0 calc(var(--dw) * .02cqw) #0b0b0c,
    var(--cs-shadow);
}

.cs-phone .cs-screen {
  --sr: 393 / 852;
  border-radius: calc(var(--dw) * .13cqw);
}

/* Статус-бар и Dynamic Island рисуются поверх экрана; скриншот начинается под статус-баром.
   cs-phone--native — в записи экрана уже есть свой статус-бар: рисуем только остров, пошире. */
.cs-phone .cs-screen > .cs-media {
  top: 6.4%;
  height: 93.6%;
}

.cs-phone .cs-screen::before {
  /* как на iPhone: время по центру левого «уха» у острова, значки — по центру правого */
  content: "9:41";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 6.4%;
  padding-right: 66%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sb, #0b0b0c) var(--sb-icons) no-repeat 86.5% 52% / auto 24%;
  color: var(--sb-fg, #fff);
  font: 600 calc(var(--dw) * .04cqw) / 1 -apple-system, BlinkMacSystemFont, "Inter Display", sans-serif;
  letter-spacing: 0;
}

.cs-phone .cs-screen::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 1.4%;
  left: 50%;
  width: 32%;
  height: 4.1%;
  border-radius: 99px;
  background: #000;
  transform: translateX(-50%);
}

.cs-phone {
  --sb-icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='7.6' width='3' height='3.8' rx='.9'/%3E%3Crect x='4.6' y='5.4' width='3' height='6' rx='.9'/%3E%3Crect x='9.2' y='3' width='3' height='8.4' rx='.9'/%3E%3Crect x='13.8' y='.6' width='3' height='10.8' rx='.9'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M22.6 4.3a9.4 9.4 0 0 1 12.8 0'/%3E%3Cpath d='M25 6.8a5.9 5.9 0 0 1 8 0'/%3E%3C/g%3E%3Cpath fill='%23fff' d='M29 11.3l-2.1-2.1a3 3 0 0 1 4.2 0z'/%3E%3Crect x='41.5' y='.9' width='22' height='10.2' rx='3' fill='none' stroke='%23fff' stroke-opacity='.4'/%3E%3Crect x='43.3' y='2.7' width='18.4' height='6.6' rx='1.7' fill='%23fff'/%3E%3Cpath d='M65 4.2v3.6a1.9 1.9 0 0 0 0-3.6z' fill='%23fff' fill-opacity='.45'/%3E%3C/svg%3E");
}

.cs-phone--light-bar {
  --sb: var(--sb-light, #fff);
  --sb-fg: #000;
  --sb-icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='7.6' width='3' height='3.8' rx='.9'/%3E%3Crect x='4.6' y='5.4' width='3' height='6' rx='.9'/%3E%3Crect x='9.2' y='3' width='3' height='8.4' rx='.9'/%3E%3Crect x='13.8' y='.6' width='3' height='10.8' rx='.9'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M22.6 4.3a9.4 9.4 0 0 1 12.8 0'/%3E%3Cpath d='M25 6.8a5.9 5.9 0 0 1 8 0'/%3E%3C/g%3E%3Cpath fill='%23000' d='M29 11.3l-2.1-2.1a3 3 0 0 1 4.2 0z'/%3E%3Crect x='41.5' y='.9' width='22' height='10.2' rx='3' fill='none' stroke='%23000' stroke-opacity='.4'/%3E%3Crect x='43.3' y='2.7' width='18.4' height='6.6' rx='1.7' fill='%23000'/%3E%3Cpath d='M65 4.2v3.6a1.9 1.9 0 0 0 0-3.6z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E");
}

.cs-phone--native .cs-screen > .cs-media {
  top: 0;
  height: 100%;
}

.cs-phone--native .cs-screen::before {
  display: none;
}

.cs-phone--native .cs-screen::after {
  width: 40%;
  height: 4.4%;
  top: 1.2%;
}

.cs-phone--flat {
  /* только экран со скруглением, без корпуса */
  padding: 0;
  background: none;
  box-shadow: var(--cs-shadow);
  border-radius: calc(var(--dw) * .1cqw);
}

.cs-phone--flat .cs-screen::after {
  display: none;
}

.cs-phone--flat .cs-screen {
  border-radius: inherit;
}

/* ---------- Раскладки ---------- */

/* Десктоп по центру: на цвете, на фото, на видео */
.cs--desktop { --cs-ratio: 1880 / 1440; }
.cs--desktop .cs__item { --dw: 72; }

/* Ноутбук */
.cs--laptop { --cs-ratio: 1880 / 1440; }
.cs--laptop .cs__item { --dw: 70; --y: 51%; }

/* Длинный скролл: страница прокручивается внутри экрана сама */
.cs--scroll { --cs-ratio: 1880 / 1440; }
.cs--scroll .cs__item { --dw: 62; }
.cs--scroll .cs-screen { --sr: 1440 / 1000; }
.cs--scroll .cs-screen .cs-media {
  animation: cs-scroll var(--cs-dur, 24s) cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-play-state: paused;
}
.cs--scroll.is-visible .cs-screen .cs-media { animation-play-state: running; }

@keyframes cs-scroll {
  0%, 8% { object-position: 50% 0; }
  92%, 100% { object-position: 50% 100%; }
}

/* Два крупных экрана, срезанные краями блока — как Natural Health */
.cs--desktops-bleed { --cs-ratio: 1880 / 1850; }
.cs--desktops-bleed .cs__item { --dw: 62; }
.cs--desktops-bleed .cs__item:nth-child(1) { --x: 26%; --y: 25%; }
.cs--desktops-bleed .cs__item:nth-child(2) { --x: 74%; --y: 75%; }

/* Две длинные страницы рядом, уходят за нижний край — как Independent Director и Татнефть */
.cs--pages-pair { --cs-ratio: 1880 / 1500; }
.cs--pages-pair .cs__item { --dw: 36; transform: translateX(-50%); }
.cs--pages-pair .cs__item:nth-child(1) { --x: 30%; --y: 10%; }
.cs--pages-pair .cs__item:nth-child(2) { --x: 70%; --y: 22%; }
.cs--pages-pair .cs-screen { --sr: 1440 / 3000; }

/* Десктоп + телефон */
.cs--desktop-phone { --cs-ratio: 1880 / 1300; }
.cs--desktop-phone .cs__item:nth-child(1) { --dw: 66; --x: 45%; --y: 47%; }
.cs--desktop-phone .cs__item:nth-child(2) { --dw: 17; --x: 80%; --y: 57%; --z: 2; }

/* Планшет */
.cs--tablet { --cs-ratio: 1880 / 1440; }
.cs--tablet .cs__item { --dw: 64; }
.cs--tablet .cs__item:has(.cs-tablet--portrait) { --dw: 44; }

/* Один телефон */
.cs--phone { --cs-ratio: 1880 / 1100; }
.cs--phone .cs__item { --dw: 21; }

/* Телефоны в ряд: 2–3 штуки, опция «волной» */
.cs--phones { --cs-ratio: 1880 / 1300; }
.cs--phones .cs__stage {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6cqw;
}
.cs--phones .cs__item {
  position: relative;
  left: auto;
  top: auto;
  transform: translateY(var(--ty, 0));
  --dw: 21;
}
.cs--phones.cs--wave .cs__item:nth-child(odd) { --ty: 5cqw; }
.cs--phones.cs--wave .cs__item:nth-child(even) { --ty: -5cqw; }

/* Сетка мобильных экранов: 3 в ряд, сколько угодно рядов, высота по содержимому */
.cs--phones-grid {
  --cs-ratio: auto;
  padding: 8cqw 12cqw;
}
.cs--phones-grid .cs__stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 6cqw 8cqw;
}
.cs--phones-grid .cs__item {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  transform: none;
  --dw: 21;
}
.cs--phones-grid .cs__item:nth-child(3n + 2) { transform: translateY(8cqw); }

/* Телефоны по секциям: блок поделён на 4 секции линиями, телефоны в два ряда, часть ячеек пустая */
.cs--phones-cells {
  --cs-ratio: auto;
  --cs-divider: rgba(255, 255, 255, .12);
  padding: 7cqw 0;
}
.cs--light.cs--phones-cells { --cs-divider: rgba(0, 0, 0, .1); }
.cs--phones-cells .cs__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--cs-divider) 0 0) 25% 0 / 1px 100% no-repeat,
    linear-gradient(var(--cs-divider) 0 0) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--cs-divider) 0 0) 75% 0 / 1px 100% no-repeat;
}
.cs--phones-cells .cs__stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 25cqw);
  row-gap: 6cqw;
  justify-items: center;
}
.cs--phones-cells .cs__item {
  position: relative;
  left: auto;
  top: auto;
  width: calc(var(--dw) * 1cqw);
  transform: none;
  --dw: 15;
}
.cs--phones-cells .cs__item:nth-child(1) { grid-area: 1 / 1; }
.cs--phones-cells .cs__item:nth-child(2) { grid-area: 1 / 3; }
.cs--phones-cells .cs__item:nth-child(3) { grid-area: 2 / 2; }
.cs--phones-cells .cs__item:nth-child(4) { grid-area: 2 / 4; }
.cs--phones-cells .cs__item:nth-child(5) { grid-area: 1 / 4; }
.cs--phones-cells .cs__item:nth-child(6) { grid-area: 2 / 1; }

/* Фото + телефон: две половины */
.cs--phone-photo { --cs-ratio: 1880 / 1200; }
.cs--phone-photo .cs__bg {
  left: 50%;
}
.cs--phone-photo .cs__photo {
  position: absolute;
  inset: 0 50% 0 0;
  overflow: hidden;
}
.cs--phone-photo .cs__item { --dw: 20; --x: 75%; }

/* Обзор всех страниц сеткой */
.cs--pages {
  --cs-ratio: auto;
  padding: 7cqw 6cqw;
}
.cs--pages .cs__stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 2.4cqw;
}
.cs--pages .cs__item {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  transform: none;
}
.cs--pages .cs-flat { border-radius: .5cqw; box-shadow: 0 .4cqw 1.6cqw rgba(0, 0, 0, .3); }
.cs--light.cs--pages .cs-flat { box-shadow: 0 .3cqw 1.2cqw rgba(20, 24, 40, .07); }

/* Изометрия: сетка страниц под наклоном */
.cs--iso { --cs-ratio: 1880 / 1440; }
.cs--iso .cs__stage {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  width: 150cqw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3cqw;
  transform: translate(-50%, -50%) rotateX(52deg) rotateZ(-38deg);
  transform-style: preserve-3d;
}
.cs--iso .cs__item {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  transform: none;
}
.cs--iso .cs__item:nth-child(3n + 2) { transform: translateY(-8cqw); }
.cs--iso .cs-flat { border-radius: .6cqw; box-shadow: -2cqw 3cqw 5cqw rgba(0, 0, 0, .35); }

/* Видео или фото в форме знака клиента (сердце Duplex) — маска из SVG */
.cs--mask { --cs-ratio: 1880 / 1300; }
.cs--mask .cs__item { --dw: 30; }
.cs--mask .cs-screen {
  --sr: var(--mask-ratio, 1);
  background: none;
  -webkit-mask: var(--cs-mask) center / contain no-repeat;
  mask: var(--cs-mask) center / contain no-repeat;
}

/* Фото или видео на весь блок */
.cs--photo { --cs-ratio: 1880 / 1150; }

/* ---------- Мобильные компоновки (из кейсов ICL, Duplex) ---------- */

/* Разреженная сетка: до 5 телефонов без корпуса, часть ячеек пустая, ряды со сдвигом — как ICL и Duplex */
.cs--phones-sparse {
  --cs-ratio: auto;
  padding: 9cqw 0 12cqw;
}
.cs--phones-sparse .cs__stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 21cqw);
  justify-content: center;
  column-gap: 9cqw;
  row-gap: 5cqw;
}
.cs--phones-sparse .cs__item {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  transform: none;
  --dw: 21;
}
.cs--phones-sparse .cs__item:nth-child(1) { grid-area: 1 / 1; }
.cs--phones-sparse .cs__item:nth-child(2) { grid-area: 1 / 3; transform: translateY(-4cqw); }
.cs--phones-sparse .cs__item:nth-child(3) { grid-area: 2 / 2; }
.cs--phones-sparse .cs__item:nth-child(4) { grid-area: 2 / 3; transform: translateY(14cqw); }
.cs--phones-sparse .cs__item:nth-child(5) { grid-area: 3 / 1; }

/* Сетка 4×3 как в кейсе Duplex: 5 телефонов в корпусе — ряд 1: колонки 2 и 4, ряд 2: 3 и 4, ряд 3: 1 */
.cs--phones-duplex { --cs-ratio: 1920 / 2949; }
.cs--phones-duplex .cs__item { --dw: 21.4; }
.cs--phones-duplex .cs__item:nth-child(1) { --x: 35.4%; --y: 18.3%; }
.cs--phones-duplex .cs__item:nth-child(2) { --x: 87.3%; --y: 18.3%; }
.cs--phones-duplex .cs__item:nth-child(3) { --x: 61.5%; --y: 50%; }
.cs--phones-duplex .cs__item:nth-child(4) { --x: 87.3%; --y: 50%; }
.cs--phones-duplex .cs__item:nth-child(5) { --x: 12.9%; --y: 81.7%; }
/* светлый титановый кант корпуса */
.cs--phones-duplex .cs-phone:not(.cs-phone--flat) {
  box-shadow:
    0 0 0 calc(var(--dw) * .014cqw) #d6d0c2,
    inset 0 0 0 calc(var(--dw) * .02cqw) #0b0b0c,
    var(--cs-shadow);
}

/* Крупный телефон на фоне бегущей строки — как ICL #15 */
.cs--phone-marquee { --cs-ratio: 1880 / 1200; }
.cs--phone-marquee .cs__item { --dw: 25; --z: 2; }
.cs__marquee {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1cqw;
  overflow: hidden;
  pointer-events: none;
}
.cs__marquee-line {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font: 400 9cqw / 1 var(--dewi, var(--inter-display, sans-serif));
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--cs-marquee-color, rgba(255, 255, 255, .07));
  animation: cs-marquee var(--cs-marquee-dur, 40s) linear infinite;
  animation-play-state: paused;
}
.cs__marquee-line:nth-child(2) { animation-direction: reverse; }
.cs__marquee-line span { padding-right: 4cqw; }
.cs--light .cs__marquee-line { --cs-marquee-color: rgba(0, 0, 0, .06); }
.cs.is-visible .cs__marquee-line { animation-play-state: running; }

@keyframes cs-marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Появление при прокрутке (только когда работает JS) ---------- */

.cs-js .cs [data-reveal] {
  opacity: 0;
  translate: 0 4cqw;
  transition: opacity .9s ease, translate 1.1s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 120ms);
}

.cs-js .cs.is-in [data-reveal] {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .cs-js .cs [data-reveal] { opacity: 1; translate: none; transition: none; }
  .cs--scroll .cs-screen .cs-media { animation: none; }
}

/* ---------- Мобильная версия ---------- */

@media (max-width: 640px) {
  .cs {
    margin-bottom: 20px;
    aspect-ratio: var(--cs-ratio-m, var(--cs-ratio));
  }
  /* увеличиваем сцену, чтобы экраны не мельчили; края композиции уходят за рамку */
  .cs__stage {
    scale: var(--cs-zoom-m, 1);
  }
  .cs--desktop, .cs--laptop, .cs--scroll { --cs-ratio-m: 1 / 1; --cs-zoom-m: 1.25; }
  .cs--desktop-phone { --cs-ratio-m: 1 / 1; --cs-zoom-m: 1.2; }
  .cs--phones { --cs-ratio-m: 4 / 5; --cs-zoom-m: 1.5; }
  .cs--phone { --cs-ratio-m: 1 / 1; --cs-zoom-m: 1.4; }
  .cs--mask { --cs-ratio-m: 1 / 1; --cs-zoom-m: 1.6; }
  .cs--iso { --cs-ratio-m: 1 / 1; }
  .cs--phones-grid, .cs--pages, .cs--phones-cells { --cs-zoom-m: 1; }
  .cs--desktops-bleed { --cs-ratio-m: 1 / 1.1; --cs-zoom-m: 1.15; }
  .cs--pages-pair { --cs-ratio-m: 1 / 1.1; --cs-zoom-m: 1.2; }
  .cs--phone-marquee { --cs-ratio-m: 1 / 1; --cs-zoom-m: 1.6; }
  .cs--phones-duplex { --cs-ratio-m: 1 / 2.87; }
  .cs--phones-duplex .cs__item { --dw: 40; }
  .cs--phones-duplex .cs__item:nth-child(1) { --x: 28%; --y: 17.9%; }
  .cs--phones-duplex .cs__item:nth-child(2) { --x: 72%; --y: 33.9%; }
  .cs--phones-duplex .cs__item:nth-child(3) { --x: 28%; --y: 50%; }
  .cs--phones-duplex .cs__item:nth-child(4) { --x: 72%; --y: 66.1%; }
  .cs--phones-duplex .cs__item:nth-child(5) { --x: 28%; --y: 82.1%; }
  .cs--phones-sparse { padding: 10cqw 0 14cqw; }
  .cs--phones-sparse .cs__stage { grid-template-columns: repeat(3, 26cqw); column-gap: 5cqw; }

  .cs--phones-grid { padding: 8cqw 6cqw; }
  .cs--phones-grid .cs__stage { gap: 6cqw 4cqw; }
}