Слипание колонок при адаптивной верстке - Вопросы по CSS

Здравствуйте! Вопрос к специалистам CSS.

Нужно поправить адаптивную верстку на готовом сайте - при небольших разрешениях слипаются колонки с картинками товаров в центральной области (в области контента). Заказчик не проверил при приемке верстки, в итоге так и осталось.

В карточке товара все нормально адаптируется, то есть, что не помещается - переносится на другую строку. А на странице, где список товаров (или категорий) - картинки друг на друга наезжают. Вот пример: http://www.vinilot.ru/naklejki-na-steny/tsvety

Непонятно, с чего начинать. Из кода удалось выяснить, что картинки с фиксированным размером, но если их сделать adaptive - то при больших разрешениях они будут увеличиваться больше своего номинального размера и следовательно расплываться. Можно ли ограничить увеличение картинок? Чтобы могли увеличиваться не более своего нормального размера. Или ограничить ширину общей колонки?

Или пусть лучше картинки остаются фиксированными, но попытаться отображать не в 3 колонки, а в 2, потом в 1?
И что проще?

И вообще насколько это сложно - можно своими силами сделать или придется обращаться к верстальщику?

Заранее спасибо!

Тут вам media CSS помогут
будет нечто подобное:

Тут вам media CSS помогут
будет нечто подобное:

Спасибо.  Интересная идея.

Правда, 50% не подходит, т.к. из-за margin на каких-то промежуточных разрешениях не помещается, но в целом все равно лучше, чем было.

А что означает код .clr:not(:last-of-type)::before и after?
(не хочу механически копировать без понимания)

Очистить стили before и after класса clr для всех элементов, кроме последнего?

.clr:not(:last-of-type)::before и after

before и after - это псевдоклассы элемента, который позволяют вставить примитивные блоки до и после основного и применить к ним CSS правила
last-of-type - указывает, что свойство применйется только к последнему элементу внутри общего родителя, который можно получить по указанному селектору
not(:last-of-type) - применит правило ко всем, кроме последнего
блок, с классом .clr - делает сброс обтекания (когда блочные элементы прилипают друг-к-другу слева или справа)

В целом, описанное выше правило, убирает очистку от обтекания всем элементам, кроме последнего. У вас .clr стоит после каждого 3го элемента. Это приводит к тому, что каждый 4й элемент идёт с новой строки.

Ага, суть понятна, направление дальнейшей работы теперь примерно представляю.

И раз уж вы, как я заметил, достаточно подробно изучали код, подскажите, насколько качество верстки конкретно этого сайта соответствует сегодняшним требованиям?
Если в дальнейшем понадобится подобная работа, имеет смысл обращаться к тому же верстальщику?

Вполне нормальная верстка, но есть конечно недочеты - например, много мусора в стилях, видно, что с другого проекта переносили и не почистили.