Вас хочет нанять на работу крупное туристическое агентство. Основная часть пользователей сервиса использует его с мобильных устройств, поэтому работа над ним идет по принципу Mobile First.
В качестве тестового задания вам предложено изменить имеющийся код вывода карточек городов по принципу Mobile First. При этом внешне результат не должен поменяться. Сейчас страница с карточками на десктопных экранах выглядит так:
А на экранах мобильных устройств — так:
- В начале работы добавьте в тег
<head>
следующий метатег<meta name="viewport" content="width=device-width, initial-scale=1.0">
. - Перепишите код по принципу Mobile First.
- Отсортируйте медиазапросы по принципу Mobile First.
Внесите изменения во вкладке CSS. Перед началом работы сделайте форк пена.