.info оверрайд

Глобальная версия - это то, что на мобилках. Тут она же повторяется и для планшетов. А усложняется начиная с 1024px, перестраивается в вытянутую такую панель.

В код добавилась секция .info__operations - это панелька с двумя кнопками: настройки, возобновить. В HTML эту штуку можно выводить всегда, но до 1024px она тупо скрыта через display: none;

С этими наведениями замес, как обычно. Ловим клик по всей карточке и смотрим, показывается ли у нас в этот момент .info__operations. Если показывается, то значит сработало наведение и пользователь сидит с курсором. Он видит кнопки старт/стоп, настроки, но пытается кликнуть куда-то еще, может быть в заголовок игры. Все окей, не делаем ничего, пусть кликает.

Если в момент клика .info__operations не показывается, то что-то у пользователя не так. У него нету курсора, нету наведения и нужных кнопок он не видит, жалобно кликает по рекламе в надежеде добраться до опций. Он либо с планшета сидит, либо пришел в карточку табом, что-то типа того. И этот кейс рассыпается еще на два:

1) если ширина меньше 1024px - то это планшет. В этом случае у нас внешний вид карточки мобильный, кнопки показывать просто негде. По-этому делаем как и на мобилках - убираем действия в поповер.
2) если ширина больге чем 1024px - то это комп с табуляциями, либо какой-нибудь телевизор. Тут места достаточно, чтобы показать панель, которую мы показываем по ховеру. В этом случае добавляем класс .info_drop - он делает тоже самое, что и наведение.
Сбрасываем этот класс по повторному нажатию (при клике уже проставлен .info_drop) и по Esc.

Остается вопрос о том, как детектить показан ли или скрыт оверлей с кнопками .info__operations и на какой ширине мы находимся.

Если у .info__operations свойство display равно none, значит мы находимся на < 1024px и работаем с поповером. Иначе у нас есть пространство для показа панели, и теперь мы уже смотрим на opacity. Если opacity равно нулю, то наведение не сработало и значит пользователь пользуется табуляциями и энтером. Показываем панель классом .info_drop

Картинки

С картинками тут страшный замес. У них разные размеры на планшетах и десктопах. И там и там может быть ретина, соответствено. Этот замес разруливается через SRCSET, но более сложны образом, через дискриптор ширины и атрибут SIZES. Подробно и хорошо оно разобрано в десктопном блоке аватарок.

Тут есть еще одна сложность: картинки у нас считаются от высоты: 60px на планшетах (как и на мобилках было), а на десктопах 50px. Однако когда мы все это запихиваем в srcset и sizes нам нужен дескриптор ширины. Это пересчитывать надо ручками. Точнее так. На бекенде мы знаем размеры картинок. Знаем, что надо отдать картинки с высотами 50px и 60px, 100 и 120px. Забираем эти четыре картинки, отдаем их на фронт, но в качетсве инфы о размерах отправляем их ширины.

А еще можно с этим совсем не заморочиваться и просто взять пачку картинок и разметку тега IMG от блока .thumb. Там они чуть побольше и это лишний трафик, но подойдут. Кейс все-равно не особо популярный.