Почему картинка искажается при 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

Как адаптировать данное фоновое изображение?

Overlord934, так задайте черный цвет.
Изображение поставьте по центру.

Или позовите дизайнера, пусть скажет, на какой ширине как показывать.

Как адаптировать данное фоновое изображение?

Overlord934,

Это как-то решается?

А какой цвет нравится?
Тот и поставьте.

А когда доходит до обрезания логотипа есть мобильная версия картинки.

Если по-другому скомпонованное лого, то норм.
А так, оно вроде векторное было.

Как адаптировать данное фоновое изображение?

Overlord934, т.е. дизайнер предпочитает обрезанный лого и текст? Меняйте дизайнера при первой возможности.

Как адаптировать данное фоновое изображение?

Оно вообще не должно обрезаться. Замените на contain.

Но если прямо по сути вопроса, то хорошо бы изучить простейшее свойство background. Вообще в любом справочнике и посмотреть из каких частей оно состоит.
В данном случае нужно background-position

Переезд на новый домен(в яндексе) как проверить?

Так и проверить. Открыть вебмастер и посмотреть глазами, что там со страницами.
Открыть поиск и тоже посмотреть глазами, какой домен.

И понимать, что процесс переиндексации и попадания в выдачу далеко не мгновенный.

Как правильно реализовать выбор данной опции?

Владимир Коротенко, дело в том, что мои аргументы основаны на спеке. А ваши ни на чем. Более того, вы путаете теги и атрибуты.
Поэтому, мы не будем продолжать дискуссию. Тем более, что, вероятнее всего, вы продолжите делать формы дивами и мы тут со своей спекой ничего не изменим.
Но автор вопроса поддержку получил и этого достаточно.

Как правильно реализовать выбор данной опции?

Владимир Коротенко, я не приходила за советами. Я пришла поддержать аудиторию выступающую за семантику, а заодно автора вопроса.

Каким образом можно реализовать такую штуку?

Overlord934, доступно скрыть. С помощью одного из паттернов visually-hidden

Как сделать данный адаптив?

Да нет, просто адаптировать табличку.

Аналоги
https://codepen.io/AnnaSummer/pen/KKBJaXG
https://codepen.io/AnnaSummer/pen/rNrPyXz

Каким образом можно реализовать такую штуку?

Overlord934, Вообще, то, что нарисовано - это логотип.
Его можно вставить и в стили, потому что уже есть лого в шапке.
Можно и как img. От читалок, скорее всё таки скрыть, опять таки и потому что уже есть в хедере и потому что вы хотите к нему норм текст.

Если к этому ещё нужен и текст, то visually-hidden в помощь (легко гуглится). Например, для h1.

Как правильно реализовать выбор данной опции?

Владимир Коротенко, а вы без картинки? Какой контейнер? Все картинки там фон. Стилизовать не будете? "Само прилетит?"
Какую обвязку, чтобы это работало? О чем вы вообще? Это работает из коробки форм.

Инпут и лейбл с двумя спанами. Это говнокод? Я, пожалуй, пойду отсюда.

Как правильно реализовать выбор данной опции?

Владимир Коротенко,

что вам мешает насыпать их в эти самые дивы

Мне мешает сумма написанных слов: div + aria (role) + tabindex и вот это всё или один нормальный семантический тег.
Другое дело, что мешает использовать семантику при вашем подходе...

Как правильно реализовать выбор данной опции?

Владимир Коротенко, это форма, потому что по сути мы собираем данные, что-то там делаем и возвращаем пользователю результат.

Про тэги доступности вы видимо не слышали?

Ага, form для формы и т.д.

Если вы про aria, то документация практически начинается со слов, сначала средства html, а если никак, то уже aria, role и т.д.

Как правильно реализовать выбор данной опции?

Это должно быть реализовано как группа скрытых радиокнопок, спрятанных за картинки?

Да, типа того.
Стилизованные лейблы от этих инпутов.
Или лейблы поверх инпутов с apperance none.

Как разместить изображения по центру?

Какие еще абсолюты для этой задачи? Да еще и фикс высота у карточки. С ума сойти.

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

Сергей delphinpro, caret-color: #cc0000; вернет курсор

Каким образом можно реализовать такую штуку?

Overlord934,

Всмысле текст делать svg картинкой вместе с фоном?

Хорошо бы не забыть, что текст текстом нужен скринридерам и читалкам.
Если вы считаете этот текст не текстом, а не имеющим смысла изображением, тогда вообще хоть чем его вставляйте.