Что означает "@media {}" и зачем в коде есть загадочная черная точка?

@media {} - это контекст для создания адаптивных стилей в CSS, который позволяет применять определенные стили на основе различных условий, таких как размер экрана, ориентация устройства и т. д.

Черная точка в коде может указывать на ошибку в CSS или HTML, так как это нестандартное поведение. Возможно, это связано с неправильным позиционированием элементов или выбором цвета.

Для создания различных стилей для разных ширин экрана с помощью CSS можно использовать @media запросы и устанавливать различные свойства стилей в зависимости от ширины экрана. Для реакции на изменение ширины окна браузера можно использовать отзывчивые методы стилей, такие как проценты или относительные единицы измерения.

Для исправления ошибок в коде, приводящих к непредсказуемому поведению элементов, нужно внимательно просмотреть CSS и HTML код и проверить правильность применения стилей, позиционирование элементов и другие свойства, которые могут влиять на отображение.

Цель CSS для сайта PhotoBox, вероятно, заключается в создании эстетичного и удобного дизайна для показа изображений. Для достижения желаемого результата, нужно улучшить стилизацию элементов, подобрать цвета и шрифты, а также обеспечить отзывчивость и адаптивность дизайна под разные устройства.

нужно понимать как работают кастомные css-свойства (ака переменные) и var() : 
 если совсем просто, то var() НЕ смотрит на потомков, а только на себя и предков, т.е. до элемента переменные доходят, но т.к. --width_n установлен в :root , то используемые внутри var() переменные (в том числе и --m ) будут искаться исключительно в самом :root , поэтому если какие-то переменные нужно переопределить, то делать это необходимо именно там, где они и используются, в этом случае это был :root 
 
 что касается box-sizing , то после его появления во все стили прописывается что-то типа 
 *, ::before, ::after { box-sizing: border-box; } 
 чтобы не страдать с легаси box-моделью css