xwjkka

В CSS, ::before создаёт псевдоэлемент,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content.

Тут можно больше прочитать про before

content - обязательное свойство для before
inset - смещение элемента
-webkit-... - для различных браузеров
mask-composite - наложение/наслаивание

там неправильно написана директория :)

Обязательно flexbox? Просто по-моему тут удобнее использовать grid.

для всего блока:

display: grid
grid-template-columns: repeat(2, 1fr)

для второго элемента в блоке

grid-row: span 2;