sergski

css-сектанты даже Джоконд рисуют, но по уму конвертировать в svg и добавить элегантных ховер-эффектов и анимации

В Яндекс-практикуме смотрите

Очевидно, что не будет. Хостинг на зарубежных серверах

Это же css, зачем?) Вам нужно только чтобы результат работы функции не противоречил заданным для поля значениям атрибутов, что логично и несложно.

Видимо хрому не нравится выставленный тип контента, если заменить на image/png, то картинки выводятся так же как в мозилле.

это не то: scroll-behavior: smooth;?
тогда вот

Технически вам нужно сделать 3 слоя
Верхний слой с крестом, под ним див с заливкой серым и полу-прозрачностью, снизу фото. Все это анимировать по наведению мыши

Задайте размеры контейнеру phone-number__icon, а для svg установите 100x100%, те

phone-number__icon {
  width: rem(12px);
  height: rem(12px);
  margin-right: rem(6px);}

.phone-number__icon-elem {
width: 100%; 
height: 100%;}

и какой у вас у спрайта для телефона viewBox?

Взять строку '2022-11-22 14:25:04.000 +0600', заменить в ней 14:25:04 на 15:35:00
Разность new Date( '2022-11-22 15:35:00.000 +0600' ) и new Date( '2022-11-22 14:25:04.000 +0600' ) будет числом в миллисекундах

Наверно, самое простое -- задать ширину элементам в %.
С Райф - 75%, с Росбанк -- 50%, остальным 25%. И все в display: flex;

Если у вас только js, то тут вариант использовать какой-нибудь сторонний сервис типа Cloudinary или nodejs с подходящим пакетом