Руководство по адаптивному дизайну
Руководство от Ахмада Шадида, где рассматриваются современные методы построения адаптивных макетов. Сюда входит использование флексов, гридов, контейнерных запросов, а также функций вроде clamp().
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.