/* YOYO — СООТНОШЕНИЕ СТОРОН ФОТОГРАФИИ ТОВАРА. ОДИН ФАЙЛ НА ВСЕ СТРАНИЦЫ.
 *
 * Слово владельца 15.09 со снимком витрины: «сделай соотношения сторон картинок
 * как у больших сетей, чтобы картинки, скачанные оттуда, хорошо отображались и
 * у нас». У больших сетей карточка товара ПОРТРЕТНАЯ — 3:4 (900×1200 и кратные).
 *
 * ПОЧЕМУ ОДИН ФАЙЛ, А НЕ ПРАВИЛО НА КАЖДОЙ СТРАНИЦЕ: соотношение было написано
 * в четырёх местах — сетка витрины 3:4, «3 в ряд» и подборки 1:1, плитка админки
 * 1:1 С ОБРЕЗКОЙ, галерея товара жёсткими 300 px, — и УЖЕ РАЗОШЛОСЬ: одна и та же
 * фотография выглядела в четырёх местах по-разному (то же «число в двух местах»,
 * 0.99.42). Здесь оно одно: --pic.
 *
 * ФОТО НИКОГДА НЕ РЕЖЕТСЯ (object-fit:contain). Обрезка съедает у портретного
 * снимка верх и низ — то есть кусок самого товара, и человек этого не видит.
 * Поэтому снимок другого соотношения ужимается целиком, а по краям остаётся
 * белое поле — ровно так же, как он выглядел там, откуда его скачали.
 *
 * ФОН ПОД ФОТО БЕЛЫЙ В ОБЕИХ ТЕМАХ, и это не забывчивость: фотографии товара
 * снимают на белом, и серая подложка вокруг них читается как грязь. Прежний
 * приём mix-blend-mode:multiply (вмешивал белый фон снимка в подложку) убран
 * вовсе — он ТЕМНИЛ снимок, у которого фон не белый, то есть врал о товаре.
 */
:root{ --pic: 3 / 4; }

.ypic{aspect-ratio:var(--pic);background:#fff;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center}
.ypic img{width:100%;height:100%;object-fit:contain;display:block}