0xD34F

скрытые радиокнопки:

<label class="button">
  <input type="radio" name="button">
  <span>click me</span>
</label>

<label class="button">
  <input type="radio" name="button">
  <span>click me</span>
</label>

.button input {
  display: none;
}

.button input:checked + span {
  background: red;
  color: white;
}

Вы добавляете скрываемому элементу класс, переключающий свойство display, одновременно с классом, который задаёт изменение прозрачности - поэтому пронаблюдать последнее вы не успеваете. Переключайте display после того, как анимация будет завершена - для этого можно подписаться на событие transitionend:

const $headers = $('.callback-list__item');
const $content = $('.callback-content__item');
$content.slice(1).addClass('hidden delete');

$(document).on('click', '.callback-list__item:not(.callback-list--active)', function() {
  $headers
    .removeClass('callback-list--active')
    .filter(this)
    .addClass('callback-list--active');

  const i = $headers.index(this);
  $content
    .not('.delete')
    .addClass('hidden')
    .one('transitionend', function() {
      $(this).addClass('delete');
      const $item = $content.eq(i).removeClass('delete');
      setTimeout(() => $item.removeClass('hidden'), 0);
    });
});

.banner h1 {
  margin-top: 0;
}

overflow-y

https://jsfiddle.net/fe7vL23u/

Свойство customPaging + стилизация.

Или просто стилизация, если кроме цифр ничего не надо - они там есть по умолчанию.

Есть linear-gradient, но там плавный переход цветов...

не обязательно:

linear-gradient(to right, white 0%, white 33%, blue 33%, blue 66%, red 66%, red 100%)

pointer-events: none для #box и pointer-events: all для :before и button

Разная ширина border'а в нормальном состоянии и при hover'е.

добавьте изображению margin: 0 auto;

пробовал font-size:0 делать, не помогает

плохо пробовали

Не выдумывайте, всё переопределяется. Просто вы этого не видите, потому что элемент с переопределённым стилем целиком скрыт вложенными элементами. Если сделать так, чтобы вложенные элементы занимали более ограниченную площадь (строчные вместо блочных, например), или сделать их частично прозрачными (тот же background, например), станет очевидным, что элемент .text был успешно стилизован.

Так, что ли?

Основной косяк был - ширина background-size в пикселях, не соответствующая реальной ширине элемента.

Когда показывается второй блок, ховер с первого уходит - значит, второй блок надо скрыть, и первый снова показать. Сразу же случается ховер у первого блока - он скрывается, второй показывается. Ховер уходит на второй блок - надо его скрыть, первый показать... Показывать второй блок надо не только при ховере на первом, но и при ховере на самом себе. А чтобы второй блок не съезжал, когда первый снова станет видимым, используем абсолютное позиционирование. Типа так.

li a {
  display: flex;
  align-items: center;
}

.container :nth-child(5n),
.container :nth-child(5n-1),
.container :nth-child(5n-2) {
  ...
}

.head * {
  cursor: default;
}

например

p:nth-child(n + 2) {

или

p:not(:first-child) {

или

p + p {