iBird Rose

transform: skewX(45deg);

каждый шрифт имеет свою ширину. можете только подобрать letter-spacing для шрифта и указывать его для определенного шрифта. но это будет смотреться не всегда красиво. поэтому лучше все же подгонять сайт под шрифт раз вы решились его поменять. или иметь 2 разных стиля если вы собираетесь менять шрифт одним щелчком.

ставить картинки бэкграундом. у бг кастомизации больше. к примеру тот же background-size: cover;

ну ты спану задал width: 65%; но бг то у тебя идет через after.
или для after тоже задай ширину тогда, либо вообще удали after и делай все в спане

обычный слайдер. просто при ховере прописано перелистывание слайдера
через kenwheeler.github.io/slick можно сделать используя методы
$('.your-element').slick('slickNext'); и $('.your-element').slick('slickPrev'); при ховере на нужные эелементы

htmlbook.ru/css/nth-child
через n переменную

никакого JS кода, размеры заголовка, анонса и изображения могут любые, обязательна поддержка IE8+.

решение: берешь и шлешь куда подальше заказчика. я тебе говорю. самый верный вариант)

p.s. а вообще с помощью float'ов можно посидеть поразмыслить. но это муторно будет.

через ::-webkit-scrollbar такое не сможете. только через плагины каких нить кастомных скроллбаров

это скорее не баг, а поведение box-shadow. тобишь эта обводка - это выглядывает background самого блока.

ну также делаешь как описал "Если бы не это можно было бы накрыть конец блока другим блоком с градиентом прозрачности и цветом равным фону.", но еще этому блоку даешь opacity какое-нить, чтобы он тоже был полупрозрачным и просвечивался фон.