.avatar оверрайд

Тут у нас добавляется кейс с адаптивной аватаркой, который на узких ширинах 30x30, на 1024+ превращается в 40x40. И вот тут уже начинается замес с SRCSET и SIZES.

В SRCSET мы перечисляем какие у нас вообще в принципе есть картинки и сразу же через дескриптор "w" сообщаем их размеры. Далее, в SIZES мы говорим на каких ширинах какого размера должна отобразиться сама картинка на странице. Синтаксис таков, что если шире 1024px то это 40х40, все остальное - это 30px. Браузер уже сам примет решение какую картинку ему выбрать посчитав все, что ему предоставили.

.avatar_size_enlarge-on-landscape-tablet

.avatar_size_enlarge-on-desktop