cssfish

Привет!
Я нашел такое решение

gulp
    .src(`${config.src.iconsMulti}/*.svg`)
    .pipe(
      svgSprite({
        mode: {
          symbol: {
            sprite: '../sprites/sprite-multi.svg',
          },
        },
        shape: {
          transform: [
            {
              svgo: {
                plugins: [
                  {
                    removeUselessStrokeAndFill: false,
                  },
                ],
              },
            },
          ],
        },
      }),
    )
    .pipe(gulp.dest(config.dest.images));

Ставишь настройку removeUselessStrokeAndFill: false. После этого stroke-width не будет удаляться, если нету атрибут stroke

advantages__item делаете padding-left; на нужную ширину и position:relative;

span с иконками делайте position:absolute; и выравнивайте как вам нужно

В body добавляем div - врапер, с width: 100vw; height: 100vh; overflow: auto
Весь контент в нем, а модалки вне
И никаких костылей на js не нужно

Ставить body overflow: hidden; когда окно открыто

они дергаются из-за изминения размера бордера, считай ширины и высоты ячейки
вариант 1: поместить содержимое ячейки в контейнер с border transparent сразу, а при ховере/клике менять только цвет

нормальный вариант только 1)
остальное хлопотно и не кроссбраузерно