Как лучше сверстать такую нестандартную секцию?

- одной SVG, а список сам по себе
- отдельными псевдиками от элементов и расположить гридами/флексами со сдвигами или похуже абсолютами.

Как увеличить панель управления в Figma?

Ctrl Shift Alt +
Ctrl Shift Alt -

Либо Interface Scale в выпадающем меню по стрелочке наверху справа

Плитка из section по центру(html, css)?

1. <section class="main">
Это не секция в любом случае.
Это либо div, который нужен для группировки не имеющей смысла, либо тег main для основного содержимого страницы.

2. <p>Название статьи:</p>
Это не p, это <label>.
Для подписей полей формы используют label и связывают его с инпутом. Во-первых, для скринридеров, во-вторых, чтобы клик по подписи ставил фокус в поле.
https://developer.mozilla.org/en-US/docs/Learn/For...

3.

<a href="logout.php">
        <button>Выйти</button>
    </a>

Всегда проверяйте код валидатором https://validator.w3.org/nu/
Кнопки нельзя вкладывать в ссылки. И наоборот нельзя.
Выберите что-то одно. Видимо, в вашем случае ссылку.

4. Кнопки удобнее делать тегом button, а не input. Вам же легче будет стилизовать.
Вариант с input работающий но устаревший.

И т.д.

Как задать размер шрифта относительно ширины родительского блока?

Пересчитать в vw.
Для ограничений использовать функции min, max или clamp

Как правильно сверстать табы на флексах?

1. Иконки сжимаются, потому что забыли запретить это делать flex-shrink: 0

2. С центрированием вы ошибаетесь. Оно работает. Но дело в том, что родитель блоков .tab тоже флекс и его элементы занимают ширину по контенту. Соответственно, без разницы как вы там выравниваете внутренности, ведь свободного места для выравнивания всё равно нет и результат будет одинаковый при любом значении.
Если вы хотите выравнивать текст внутри tab__text, то для этого есть обычный text-align.

Когда не понятно что происходит, обводите элементы рамочками (полупрозрачный outline и отрицательный outline-offset на толщину обводки). Если сложно пользоваться инструментами разработчика.

p.s. эти иконки это не img.
Их нужно либо убрать в стили (псевдоэлементами - идеально) либо скрыть от скринридеров с помощью aria-hidden.

Как лучше делать адаптацию по телефон в px или в %?

Нет ответа "всегда делай так".

Подумайте сами.
Толщина границ: обычно не зависит от ширины вьюпорта. Как была задана дизайнером, например, в 1px, так и останется. (Бывают, конечно, разные случаи, но в большинстве так).
В чем будете задавать?

Карточки в каталоге: не знаем сколько поместится и пишем minmax(300px, 1fr). Это в чем? В px или в %?
Либо нужно выстраивать всегда по 4 карточки в ряд. Можем задать ширину по 25%, можем написать repeat(4, 1fr).
Можем, конечно и в пикселях и написать кучу media.

Так и разбирайте каждый блок. Что в нем и от чего зависит.

На всякий случай, кроме % и px полно других интересных единиц измерения.
А также функции min, max и clamp.
Рекомендую изучить перед тем как начать писать.

Какие используете единицы измерения при верстке?

Как сделать такой слайдер?

С виду обычный center mode у swiper.js

Как сделать масштабирование верстки при заполнении всей ширины экрана?

ymfront,

max-width: calc(100vh * 1.1)

Если самостоятельно 100 не умножить на 1.1, то ок.
И если не подходят @media по aspect-ratio, min-aspect-ratio, max-aspect-ratio и orientation, то тоже ок.

Но успех в том, что теперь @media вам уже подходят. Это хорошо.

Как сделать масштабирование верстки при заполнении всей ширины экрана?

ymfront, ок, давайте последний намек.

Возьмем горизонтальный вьюпорт. Т.е. минимальный размер это высота. 1rem = 1vmin = 1vh.

Считаем (для простоты даже забьем на min-height 100%):
wrapper
- padding - 4rem
лого
- высота 7.8
- margin 5
title
- 5строк по 10 = 50
колесо
- высота 62

Складываем и получаем 128.8vh

Каким образом, по вашей логике, это должно было поместиться в 100?

После раздумий можно вернуться к моим первым комментариям с инструментами, которые могут помочь.
Гриды, кстати, ещё с их min-content или minmax.

Почему картинка искажается при transform rotate?

Павел Орловский, для начала прислушаться к просьбе из комментария: сделать песочницу с видимой проблемой на codepen.io
Добавить её в вопрос и потом позвать.

Как сделать масштабирование верстки при заполнении всей ширины экрана?

ymfront, но раз всё так, то остается только фриланс.

Как сделать масштабирование верстки при заполнении всей ширины экрана?

ymfront, кто мешает крутить svg? Кто мешает ему быть интерактивным?
Что делать, если мало поддержки aspect-ratio я вроде написала выше.

Как сделать масштабирование верстки при заполнении всей ширины экрана?

ymfront,

И JS тоже не подходит.

Этот-то как раз подходит в любом случае. (Тут скорее вопрос, можно ли решить без него. )
Например, плагины типа fittext.
Но, скорее всего придется допиливать для работы не только с шириной, но и с высотой.

Ещё вариант работающий всегда: это запихать всё в svg, задать contain, а текст доступно скрыть.

Как сделать масштабирование верстки при заполнении всей ширины экрана?

ymfront, у вас там ни одной картинки и фона нет?

Разумеется, что тексты вы будут верстать текстом. В vw или как у вас и написано в vmin.

Могу дописать еще @media. Может наведет на правильные мысли.
Если не наведет, то допишу ещё JS.

Как сделать масштабирование верстки при заполнении всей ширины экрана?

Этот вопрос может быть сложным только при проблемах с геометрией.
С точки зрения верстки проблем нет.

Т.е. сначала определяетесь как это должно выглядеть, потом пишете стили.

Какие свойства помогут:
- object-fit
- background-size
- aspect-ratio (или хак с паддингами, если недостаточно поддержки)

И дальше сопутствующие для расположения bg position, object-position, флексы, гриды

По какой причине в данном случае появляется переполнение контента?

Поддерживаю всё, что сказал Сергей в ответе.
И плюс дополнительный вопрос: зачем вам нужно указывать ширину body. Если с ней ничего не делать, то и так всё будет хорошо. Нужно только обнулить margin у body

Можно ли переделать готовый сайт на joomla?

Конечно, реально.

Другой вопрос, что дешевле или целесообразнее (спрашивать нужно не у нас, а у клиента).

Конечно в лендинге на joomla слишком много файлов для лендинга. Но судя по ссылке, которую вы дали в комментариях, это всё таки не лендинг.

Почему картинка искажается при transform rotate?

Павел Орловский, это не колхоз, это просто полная фигня. Там просто первые две строки лишние.

Почему картинка искажается при transform rotate?

vertical align не?

Не.
Потому что vertical-align работает вовсе не так, как вам кажется.
1. https://web-standards.ru/articles/vertical-align/
2. https://css-live.ru/css/metriki-shrifta-line-heigh...

Как обрезать элементы по ширине родительского блока?

flex-wrap и overflow родителю, детям white-space nowrap