Антон Муравьев

Я так понимаю, что Вы добавляете класс также с точкой, но этого делать не нужно. Следует добавлять дополнительные классы просто через пробел. class="class1 class2" - никаких новых точек

Например, создать дочерний div, который будет кругом (border-radius: 50%) в цвета фона. Получится, что кусок как будто вырезан. Также из способов. Можно создать готовый блок с вырезом, например в PS, потом вставлять картинкой. Третий вариант - svg.

Добавьте pointer-events: none; в класс картинки.

Лучше всего делать, конечно через стили. Подробнее тут.

Как Вам такое, например? Лучше открыть на самом сайте, чтоб Вы проверили изменение ширины

Если тебе нужно увеличить размер шрифта прям на всем сайте и во всех тегах, то это реализуется через селектор *

*{
font-size: 50%;
}

Updated:

Смотри, когда тебе нужно добавлять >1 обводки лучше всего использовать не border и не outline, а box-shadow. Это свойство может принимать любое кол-во значений (в твоем случае всего навсего 3) исправил тебе код. Все про box-shadow можно прочитать тут. Вот отличная картинка-памятка синтаксиса