Антон Литвиненко, да, все верно. Без указания вьюпорта мобилка масштабирует как ~1000px. Как обычно не помню сколько.
Но у автора вопрос про десктопы, а на десктопах будет, всё как обычно. Т.е. какую ширину указали в стилях, такая и будет, а при меньшей будет прокрутка.
Balundula, есть довольно дорогие, но качественные курсы HTML Academy. Если заниматься вдумчиво, а не просто копировать код, то в голове заметно прояснится. Инфо есть у меня в профиле.
С самостоятельным изучением сложнее. Статей и видео полно, но нужно уметь отличать старые и некачественные материалы от дельных и собирать по кусочкам.
Читайте статьи про семантику и доступность. Так вы скорее научитесь думать правильным образом.
Вы можете задать все размеры в vw (или в других удобных вам относительных единицах измерения) и с помощью кастомных свойств.
А затем на JS при ширине меньше 1199 изменить класс body, который переопределит эти кастомные свойства.
Но какой смысл и что это упростит?
Ещё есть дурацкие варианты типа scale.
Подумайте, вот есть border в 1px. Вы его размажете сначала в 1.33 раза, потом в 2 и т.д. Зачем вам такие размазанные бревна?
Или ещё хуже с картинками. Вместо того, чтобы отдать пользователю чёткую картинку подходящего ему размера, вы выдадите ему какую-то размазню.
Аналогично и со шрифтами и т.д.
На будущее: картинки в песочницах можете заменять на заглушки из сервисов типа https://picsum.photos/ или просто любыми подходящими по размеру из яндекс картинок.
Insom84, добавить все ваши получившиеся трансформации в анимацию.
Да, к сожалению их придется повторять.
Можете воспользоваться кастомными свойствами, это уменьшит количество повторов одного итого же кода.
И сейчас будет нормально работать, если нормально напишете и запятую поставите где надо.
А на счет тега img: он одиночный, у него нет псевдоэлементов.