Даниил Попов

z-index добавьте хедеру

То, что сейчас у нас написано, скрывает псевдоэлемент ::after при наведении. Как я понял понял, вы хотите прятать один элемент при наведении на другой, верно?

Вот пример, как это можно организовать (наведите мышь на крестик):
https://codepen.io/groog/pen/XWbJaPJ

По поводу Sass и Less: это препроцессоры, они не дают вам новые методы влияния на разметку, которые не предусмотрены в самом CSS. Они о другом.

1.
+ Текст масштабируется с изменение размера экрана
- Текст масштабируется с изменение размера экрана
Такое нужно когда на резиновом сайте необходимо, чтобы текст был пропорционального размера к блоку.
Придется делать много медиа запросов, чтобы в целом у вас все смотрелось хорошо, но все есть шанс наткнуться на конфигурацию экрана, когда смотреться будет плохо
2.
Для всех сложно сделать, чтобы было хорошо. На узких экранах vw будет давать мелкий текст, на слишком широких vw даст огромный текст и пр. Много разного выплывает.
3.
В calc при умножении и делении второй аргумент должен быть числом.

Вот пример текста с относительными размерами:
https://codepen.io/groog/pen/XeLJxX

Вот еще один пример:
https://jsfiddle.net/groog/gch4mw1d/6/
Поиграйте размером экрана и посмотрите на текст

Ширину iframe поправьте

.photos iframe {
    width: auto;
}