Плохой вариант. Продублировать меню.
Еще хуже. При помощи js перемещать блок с логотипом по DOM дереву.
Нормальный. Сделать логотип относительно позиционированым. Вставить по центру, в мобильной версии делать статичным или просто изменить позицию.
Без разницы, в дальнейшем можно найти разработчика который предпочитает одно из двух и сможет разобраться. Так же разницы нет можно ли будет поддерживать это в дальнейшем, наговнокодить можно по всякому.
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
Кстати довольно легко гуглиться. И смотрите видео адекватных разработчиков, типо Вадима Макеева. Хоть чему-то научитесть Женя ЗалецкийАлександр Осадчий ))
Относительным позиционированием с применением хитрого calc, внутрь сунуть слайдер, обёртке задать высоту фиксированную. В общем дофига танцев, но вполне реально.
В нынешней спецификации разрешено внутрь ссылок вставлять блочные элементы. Можете .card внутрь "a" сунуть. Можно независимую ссылку внутри блока поставить и относительно .card позиционировать.
Задай блоку с текстом relative, псевдоэлементом растяни визуально блок, обертке которая у тебя растягивается на всю ширину overflow-x: hidden; и весь фокус