Gallery

data-row keeps two in a row on phones, for small illustrations.

Clean · light

Wireframe: product grid with a Compare checkbox on each card

Wireframe: two products selected, with a comparison bar at the bottom

Wireframe: comparison page with products side by side

Clean · dark

Wireframe: product grid with a Compare checkbox on each card

Wireframe: two products selected, with a comparison bar at the bottom

Wireframe: comparison page with products side by side

Vector

Wireframe: product grid with a Compare checkbox on each card

Wireframe: two products selected, with a comparison bar at the bottom

Wireframe: comparison page with products side by side

Comic

Wireframe: product grid with a Compare checkbox on each card

Wireframe: two products selected, with a comparison bar at the bottom

Wireframe: comparison page with products side by side

Markup contract

div.gallery > .figure (2 or more). Set `gallery` to a list of { src, alt, caption }.
Three images get three columns, any other number gets two. Phones get one.