RAX7

div {
  display: grid;
}
p {
  grid-area: 1 / 1;
}

Так?

.wrapper {
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
}

.test2 {
  width: calc(100% - 2 * 100px - 2 * 5px); /* 100% - left - right - marginLeft - marginRight */
  margin: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

Потому что первый вариант компилтся в:

.promo .promo__wrapper {
  text-align: center;
}

а второй в:

.promo__wrapper {
  text-align: center;
}

css.yoksel.ru/specifity

https://css-tricks.com/gooey-effect/

Открой картинку (gradient_copy.png) в фотошопе и обрежь у нее прозрачные края.

https://masonry.desandro.com/methods.html#layout-m...

(function ($) {
  var $container = $(".masonry-container");
  $container.imagesLoaded(function () {
    $container.masonry({
      columnWidth: ".card",
      itemSelector: ".card"
    });
  });

  $(".more").click(function () {
    $(this).siblings(".moreDetal").toggle(0);
    $container.masonry("layout");
  });
})(jQuery);

Сделать для каждой иконки маску и применить эту маску к верхнему бордеру.

Если положение и размер этих линий не привязан к другим элементам, то можно просто нарисовать их градиентами.