Как менять изображения на retina экранах?
Поймите следующее, если вы просто подмените картинку, то эффект будет как у вас, увеличение в 2 раза.
Ваша же задача сделать так, чтобы ваша х2 картинка, занимала визуально ровно ту же область что и раньше.
Этого эффекта очень легко добиться для тегов IMG просто прописав ширину, например width: 100px; и всё, ретина картинка встанет как надо.
Для фоновых же изображений, все не так просто, нужно использовать background-size
В вашем случае нужно написать что-то вроде:&--yt {
      background: url('../img/yt-x2.png');
      background-size: 50% 50%;
    }
Не знаю как в вашем случае, но лично я сталкивался, что не всегда отладчик Хрома правильно прикидывается телефоном/таблеткой. Нормально работает только разрешение, если подключается какой-то JS или CSS, то сходство поведения не гарантировано. Проверяйте на оригинале / используйте эмулятор / положите на это половой орган (любой, по вкусу).