Вы криво пытаетесь решить задачу. Всё гораздо проще. На jq (или чистый js) вы вешаете событие Наведение (ховер), на обёртку ссылок. В этот момент, на него вешаете класс актив, а на всех соседних - дизаблед, и по этим классам уже стилизуете содержимое.
Потому что первым элементом в потоке является H1, и по факту ваш первый bro, является вторым элементом. Оберните, например, ваши p.bro в div, и всё будет работать корректно.
1. https://caniuse.com/#search=vw
2. px - проще. То что видишь на макете, то и указываешь. А не на глаз.
3. Em/rem - вообще иной подход, где ты размеры выстраиваешь исходя из логики, "что какой-то элемент в N раз больше/меньше родителя, и не важно какого именно размера родитель"
Наверно потому, что таблица должна оставаться таблицей... И её базовый стиль disply: table;
А если ищите помощи - оформите вопрос в человеческом виде и выложите код на Codepen или Jsfiddle
Ну и если вкратце, то внутренние элементы tr и td ожидают свойство table у родителя, в противном случае они не понимают как себя вести.
Если вам нужно что то записать - это js.
Если сделать внутренний блок, который составляешь 30% высоты родителя, то так и пишете - height: 30%, хотя не уверен, что это сработает.
FancyBox - его есть две версии и у них колбэки называются по разному, но они есть и там и там.
Там есть метод - beforeShow - которое отрабатывается до показа контента. Вот на нем вешаете какой то класс на fancybox-overlay, ну и стилизуете этот класс из css как вам угодно, хоть градиентный оверлей туда впишите
1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Нет поддержки Google Chome/Safari и мобильных браузеров (искл. самые последние IOS 6).