Это синтаксис handlebars, как сказали выше. В gulp есть такой плагин panini, он использует handlebars, но еще добавляет некоторые фишки (наследование шаблона).
Также есть Nunjucks, он помощнее.
Я раньше так делал, потом надоело каждый раз создавать файл, переходить из одного в другой и создавать файл для каждого малюсенького блок. Все это замедляло работу. Теперь снова пишу все в одном scss файле.
Решил проблему на основе 5-го пункта моих наблюдений:
убрал transition у попапа и добавил его в класс active. В нем также есть свойства opacity 1 и visibility visible.
При открытии попапа в первый раз выдается этот класс и больше он не удаляется.
Для скрытия попапа пришлось добавить еще один класс hidden, в котором прописаны opacity 0 и visibility hidden.
Класс hidden будет тоглится в дальнейшем при открытии/закрытии.
Просто слайдеру задаешь position absolute и ставишь ему top: 0, right: 0, bottom: 0 (относительно контейнера). И чтобы он вылез за контейнер как на скрине ставишь transform: translateX(50%) (или чуть меньше)