Максим, Это лишь часть объекта, остальное я вырезал, в целях экономии времени. Почему я поместил в foreignObject , потому что стояла задача сделать возможным менять картинку и текст через админку.
Вот так выглядит полный объект. В нем под замену должны попадать картинки и текст.
Vladislav, Да, видимо без js не обойтись. На сайте я использовал simplebar. Он просто мне ломал верстку определенным образом, надеялся обойтись без js.
godsplane, Да, мысль хорошая, но проблема в том, что когда ты запустишь это самое видео, то потом уже не сможешь перелестнуть слайд, так как youtube api мешает.
Lynn «Кофеман», я словил еще раз ситуацию, чтобы проверить загружается ли шрифт
Шрифт загружается. Плюс он очень маленький. Это не библиотека с иконками, а вручную составленный только с нужными иконками.
Undefined Null, Я тоже думал про меди запросы и так далее, но основная проблема в том, что если блок будет растягивать, то svg будь то бэкграунд или просто тэг, будет вести себя не так как хочется. Например если будет очень много текста в блоке то свг растянется сверху вниз, а мне например нужно, чтобы растягивалась только определенная часть как в текущей реализации. И тут к сожалению меди запросы не помогут( . Мне чуть выше в комментариях подсказали как оставить все что есть, при этом улучшив производительность
Проблема background-image в том, что это не адаптивно. То есть если хоть на капельку поменяется текст, то все может поехать, поэтому и пришлось использовать border-image
Вот так выглядит полный объект. В нем под замену должны попадать картинки и текст.