Андрей Верх

Скорее другие подходы устарели и @font-face единственный.
Может вы о методах оптимизации этого подключения?

Используйте отзывчивую вёрстку и не придётся привязываться к каким-то определённым точкам перехода.

Верстаете и смотрите где блоки перестают влезать и где стоит новые стили задать. Хоть через каждые 50 пикселей.

только модулем

Мне кажется тут вопрос больше в "нужно ли"?
Не встречал ситуаций, когда пришлось бы calc использовать. Чаще всего им пользуются из-за неумения верстать.

на body вешается класс c overflow:hidden;height:100vh;

:focus'a нет у div'ов. Это состояние только для полей ввода.
Нормально код перепишите и не будет проблем. К чему эти каскады и скрипты...

.input_control:focus {}

Таблица, подразумевает равное количество ячеек. Так что сомнительно что тут она пригодна.

Если просто списками стоящими рядом, то никаких проблем...

К вариантам что написали, добавил бы ещё:

.advantages__item
.advantages__item-img
.advantages__item-text

Использую поблочный подход и пишу параллельно и HTML и CSS. Продумать структуру настолько, чтоб сразу весь ХТМЛ написать, нереально. Да и плюсов никаких в том не вижу.

1. Сделайте нормальную раскладку блоков, а не через float, чтоб они не съезжали. Flexbox, table или ещё как
2. Картинке задайте max-width:100%

Возможно

<meta name="apple-mobile-web-app-capable" content="yes" />