Михаил, ок, давайте объясню подробнее: правильно, браузер знает слова bolder и lighter и умеет пересчитывать в числовое значение. Но в добавленном шрифте нет этих начертаний. Поэтому он не знает как их рисовать. Но bold он может сгенерировать, не всегда красиво, правда. А bolder делать таким же как и bold.
Он центрируется. Просто у родителя нет высоты, а значит она определяется по содержимому.
Значит, нужно сделать форму справа, общему родителю задать флекс. Если форма больше блока, то блок увеличит высоту.
(Еще мне почему-то кажется, что вам нужен space-between, а не center)
не url(svg-icons-spite), а url(svg-icons-sprite.svg#id) и никаких bg position для выбора конкретной иконки.
И это если без доступности через CSS, а автору нужно управление через стили.
kirigosh,
к 2. если телефон у вас на что-то наползает, ничего страшного не случится если он наползет вместе с прозрачным блоком. Хорошо бы выкладывать всю задачу, а не кусками.
к 4. clip-path
kirigosh, значит,
либо вводите еще один блок
либо увеличиваете высоту "серого" блока (визуально ничего не изменится, потому что серый это градиент, а не фон)
либо внизу налепляете белый псевдоэлемент для скрытия лишнего (хорошо это или плохо зависит от того, что ниже)
либо (во!) картинку меняете на div с фоновой картинкой и меняете bg position
Сверстайте так какой-нибудь одни блок, например, сетку товаров в инет-магазине.
И посмотрите как это будет выглядеть на разных устройствах, потом посчитайте количество media, которые вы допишете, чтобы выглядело норм.
Заодно, всё это проделываете, поймете нравится вам такой подход или нет.
какую единицу использовать в какой ситуации
Неоднократно писала, что ту, от которой зависит конкретный параметр.
Простейший пример: толщина border.
