Капитан Какао

Уже починили https://forum.figma.com/t/library-styles-not-displ...

Открой новое окно приложения (Ctrl + Shift + N) или запускай разные версии приложений (Figma и Figma Beta).

Если у двух элементов в гриде указаны одинаковые области расположения, то они будут накладываться друг на друга. Ниже в разметке - выше в наложении.
p.s. убрал прозрачность у второго блока, чтобы было видно что он сверху.

https://jsfiddle.net/DelphinPRO/kLa2ovtx/

Можно вынести элемент из потока абсолютным позиционированием jsfiddle.net/q72bs1tp/1

Т.е. если внутри элемента с overflow:hidden находится абсолютно позиционированный дочерний элемент, а родитель имеет static позиционирование, то дочерний элемент будет спозиционирован относительно ближайшего в иерархии элемента со свойством position отличным от static и не будет обрезан родителем с overflow:hidden. Тут есть ряд нюансов, но пример кроссбраузерный.

зы: как-то так можно оставить и позиционирование и overflow jsfiddle.net/q72bs1tp/2

https://jsfiddle.net/3m6yu48c/2/

<h1 class="title">
    <span class="title__w1">корм</span>
    <span class="title__w2">для</span>
    <span class="title__w3">домашних</span>
    <span class="title__w4">кроликов</span>
</h1>

.title {
  display: grid;
  grid-template-areas: 
    "w1 w2"
    "w1 w3"
    "w4 w4";
    grid-template-columns: auto 1fr;
    
    &__w1{
      grid-area: w1;
      font-size: 2.5em;
    }
    
    &__w2{
      grid-area: w2;
    }
    
    &__w3{
      grid-area: w3;
    }
    
    &__w4{
      grid-area: w4;
      font-size: 2em;
    }
}

Все возможно.
Основной вариант пилите на гридах, дополнительно через @supports зафолбечьте на флексах. Фоллбек естественно будет немного отличаться поведением и видом от основного варианта, но доступность контента сохранится, это главное.

Так делать не принято, и вам это не нужно.

Раз у всех этих элементов должен быть один класс, это должны быть корневые элементы экземпляров компонента Preloader. Тэг можно передать через props, как и те элементы, что сейчас являются соседними:

function Preloader({ Tag = 'h1', children }) {
  return (
    <Tag className={s.wrapper}>
      <div className={s.preloader}></div>
      {children}
    </Tag>
  );
}

<div className="App">
  <Preloader>hello, world!!</Preloader>
  <Preloader Tag="h2">fuck the world</Preloader>
</div>

const elements = Array.prototype.filter.call(
  document.querySelectorAll('.green'),
  (n, i, a) => n.nextElementSibling !== a[i + 1]
);

Если отдельно стоящие элементы не интересуют, то замените селектор на '.green + .green', или при фильтрации дополнительно проверяйте, что n.previousElementSibling === a[i - 1].

const getLastPartOfURL = url =>
    decodeURIComponent(url.slice(url.lastIndexOf('/') + 1));

str.split('/').pop()
// или
str.match(/[^\/]+$/)[0]
// или
str.replace(/.*\//, '')
// или
str.slice(str.lastIndexOf('/') + 1)
// или
Array.from(str).reduce((acc, n) => n === '/' ? '' : acc + n, '')
// или
[...str].filter((n, i, a) => !a.includes('/', i)).join('')

И не надо страдать фигней

.first,
.second {
  &::before {}
}

.first {
  &::after {}
}

Если очень хочется, можно так

.first,
.second {
  &::before {}
  
  @at-root {
    .first {
      &::after {}
    }
  }
}

Например, что-то в таком духе https://jsfiddle.net/m06bkpdy/
Или svg
Или border-image
Или вообще объединить с картинкой, но нужно смотреть макет.

p.s. лучше вот так расположить градиент
Чтобы не высчитывать размеры для средней полосы.