Sand, я повторю: тут нет "должен". Верстальщик либо умеет это делать и берет работу либо не умеет и идет искать того, кто предоставит 3 вариации.
По большому счету без разницы, сколько вариантов нарисовано. Ведь всё равно на тех интервалах, где макета нет, часто приходится что-то придумывать.
Иногда даже предпочитаю макеты с одним вариантом. Быстрее писать из головы, чем сверяться с макетом.
Но бывает встречаются и сложные задачки, на обдумывание которых уходит заметное время.
0. Начните с валидатора https://validator.w3.org/nu/
Это позволит избавится от лишних тегов и нормально применять стили.
1. Стилизацию делайте по классам, а не по id, целее будете.
2. За красную строку отвечает свойство text-indent. Только в вебе так никто не пишет. Но это уже вопросы к дизайнеру, хотя хорошо бы и верстальщику владеть основами.
3. Не вполне ясно как из задания "Красная строка 40px;" у вас получился паддинг в 39px.
4. Размер шрифта задается свойством font-size.
Если всё же хотите использовать краткое свойство font, то посмотрите в справочник, как с ним работать.
p.s. судя по виду примера, вы читаете/смотрите уроки прошлого века.
Дизайнер не станет рисовать 1920, а потом 1660 и так с шагом в 300px.
В лучшем случае это будет 3 размера десктоп-планшет-мобилка.
А сверстано должно быть так, чтобы было по меньшей мере нормально от мелких мобилок до 8к.
В данной ситуации, по видимому, слово "должен" уже не очень уместно и формально, если не сказали, что должен быть адаптив, то как бы и всё.
Но хороший верстальщик либо сам сделает адаптив либо предварительно уточнит.
display: none.Но вообще как именно скрывать, зависит от целей, зачем скрывали и как собираетесь показывать.