.product

Картинки строго 4:3. Если будет загружена картинка другого размера, то вёрстка сожмёт и кропнет её до 4:3.

В идеале чтобы бэк обрезал картинки до 276x207 и 276x207@2x. Тогда они будут отображаться пиксель в пиксель.

Фото

Вариант, когда загружается полноэкранная фотка:

... он выглядит не очень, потому что фотка касается бордюров. В идеале дать админу в админке чекбокс типа:

Загружаю полноформатную фотографию
    Чекнуть при загрузке обложки, которая целиком состоит из изображения, без белых краёв.
    Фото будет вытянуто на 1px влево, вверх и вправо поверх бордюра. Размер 278x208.

При таком раскладе добавляем модификатор:
.product__image--stretch-over-border

Скидка

Оригинальная цена оборачивается в
<s class="product__regular-price">...<s>,
а рядом добавляется новая цена обернутая в:
<span class="product__discount-price">...</span>

Товар в корзине

Добавляем крестик .product__delete чтобы можно было из козины удалить.

Заглушки

В папке content/ есть заглушки на отсутствующие категории предметов. Как-то так получилось, что картинки для Русского языка и литературы выглядят одинаково, при необходимости переделать.

В идеале выводим так же с .product__image--stretch-over-border:

Полный список заглух:
product-dummy-english-language.svg
product-dummy-biology.svg
product-dummy-chemistry.svg
product-dummy-computer-science.svg
product-dummy-history.svg
product-dummy-literature.svg
product-dummy-math.svg
product-dummy-physics.svg
product-dummy-russian-language.svg
product-dummy-sociology.svg

Еще там же есть одна отдельная заглушка для преподавательских курсов product-dummy-teacher.svg: