.ids__space {
  height: var(--ids__spacer-s);

  &.S {
    height: var(--ids__spacer-s);
  }
  &.M {
    height: var(--ids__spacer-m);
  }
  &.L {
    height: var(--ids__spacer-l);
  }
  &.XL {
    height: var(--ids__spacer-xl);
  }
}

/* Доля основной колонки от контейнера — одно число: от него считаются
   и ширина .ids__wrapper, и левое поле под оглавление (publication.css) */
:root {
  --ids__column: 0.63;
}

/* Основная колонка без модификатора — текст публикации, главная,
   /publications/: одна ширина, края совпадают. Шире — модификаторами */
.ids__wrapper {
  position: relative;
  width: calc(var(--ids__column) * 100%);
  margin: 0 auto;

  /* На мобильных — во всю ширину с минимальными паддингами как у хедера */
  @media (width < 768px) {
    width: 100%;
    padding: 0 0.8em;
    box-sizing: border-box;
  }

  /* Чуть шире обычной колонки — промоблоки главной */
  &.M {
    width: 82%;

    @media (width < 768px) {
      width: 100%;
      padding: 0 calc(var(--ids__density) * 0.6rem);
    }
  }
  &.L {
    width: 85%;

    @media (width < 768px) {
      width: 100%;
      padding: 0 calc(var(--ids__density) * 0.6rem);
    }
  }
  &.XL {
    width: 100%;
    padding: 0 calc(var(--ids__density) * 0.75rem);

    @media (width < 768px) {
      padding: 0 calc(var(--ids__density) * 0.6rem);
    }
  }
  &.XXL {
    width: 100%;

    @media (width < 768px) {
      padding: 0;
    }
  }

  & .ids__text-width {
    width: 85%;

    @media (width < 768px) {
      width: 100%;
    }
  }
}

.ids__sequence {
  display: flex;
  flex-wrap: wrap;
  /* Воздух к тексту сверху и снизу — как у одиночной иллюстрации
     (--shift__illustration-gap); зазор между колонками — --gap */
  margin-top: var(--shift__illustration-gap);
  margin-bottom: var(--shift__illustration-gap);
  --gap: 0rem;
  gap: var(--gap);

  &.gap-L {
    --gap: var(--ids__gap-l);
  }

  &.gap-M {
    --gap: var(--ids__gap-m);
  }

  &.gap-S {
    --gap: var(--ids__gap-s);
  }

  /* Ряд за рядом: между ними ровно один воздух, не два */
  & + .ids__sequence {
    margin-top: 0;
  }

  .ids__sequence-item {
    --columns: 4;
    width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));

    @media (width < 768px) {
      --columns: 2;
    }
  }

  &.XL {
    .ids__sequence-item {
      --columns: 2;

      @media (width < 768px) {
        --columns: 1;
      }
    }
  }

  /* Модификаторы Shift */

  /* На мобильных не переносить колонки (бывш. .no-wrap-mobile-grid) */
  &.no-wrap .ids__sequence-item {
    @media (width < 768px) {
      --columns: var(--desktop-columns, 2);
    }
  }
  &.no-wrap.XL .ids__sequence-item { --desktop-columns: 2; }
  &.no-wrap.L .ids__sequence-item { --desktop-columns: 3; }

  /* Ряд, за которым сразу идёт следующий ряд (бывш. .no-bottom-space-grid):
     между рядами ровно зазор, как между колонками. Перед текстом или
     заголовком .tight ничего не меняет — ряд ведёт себя как обычный */
  &.tight {
    &:has(+ .ids__sequence) {
      margin-bottom: var(--gap);
    }

    .ids__sequence-item > :last-child {
      margin-bottom: 0;
    }
  }

  /* Колонки «Додо / Не Додо»: первый абзац ячейки — серый капс,
     в первой ячейке — оранжевый (бывш. .dodo-not-dodo). Подпись — текст,
     поэтому сверху у такой сетки обычный текстовый отступ, не иллюстративный */
  &.labels {
    margin-top: 0;
  }
  &.labels .ids__sequence-item > p:first-of-type {
    font-size: 0.75em;
    font-weight: 570;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ids__caption);
  }
  &.labels .ids__sequence-item:first-of-type > p:first-of-type {
    color: var(--shift__brand);
  }
  /* «Нет / Да» с зелёным «Да» (бывш. .dodo-not-dodo--yes-green):
     первая метка серая, вторая — цветом успеха */
  &.labels.yes-green .ids__sequence-item:first-of-type > p:first-of-type {
    color: var(--ids__caption);
  }
  &.labels.yes-green .ids__sequence-item:nth-of-type(2) > p:first-of-type {
    color: var(--ids__success);
  }
  &.L {
    .ids__sequence-item {
      --columns: 3;

      @media (width < 768px) {
        --columns: 2;
      }
    }
  }

  &.S {
    .ids__sequence-item {
      --columns: 6;

      @media (width < 768px) {
        --columns: 3;
      }
    }
  }
}

.ids__rounded {
  border-radius: var(--ids__radius);
  corner-shape: squircle;
  overflow: hidden;
}

/* Без corner-shape (Safari, Firefox) — четыре SVG-маски по углам. Маска
   режет угол заметно жёстче, чем сквиркл Chrome при том же радиусе,
   поэтому радиус в ней на четверть больше */
@supports not (corner-shape: squircle) {
  .ids__rounded {
    border-radius: 0;
    border-radius: initial;
    mask:
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,1 c0,-1 0,-1 1,-1 l99,0 l0,100 l-100,0 Z"/></svg>') top left / calc(var(--ids__radius) * 125) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l99,0 c1,0 1,0 1,1 l0,99 l-100,0 l0,-100 Z"/></svg>') top right / calc(var(--ids__radius) * 125) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,99 c0,1 -0,1 -1,1 l-99,0 Z"/></svg>') bottom right / calc(var(--ids__radius) * 125) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,100 l-99,0 c-1,0 -1,-0 -1,-1 Z"/></svg>') bottom left / calc(var(--ids__radius) * 125) no-repeat intersect
    ;
  }
}

header,
footer {
  padding: calc(var(--ids__density) * 1rem);
}