How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Layout: a "Featured" label, 71px of space, then the set. The set is a three column grid 656fr 312fr 312fr with 32px gaps (at 1344px wide that is 656 / 312 / 312). The arrows sit under it, right aligned, 56px below.
- Wide card: photo at aspect-ratio: 656 / 313, then 24px below it a row with the title (uppercase display font) and a 489px wide description on the left, and the price right aligned on the right. A bookmark button sits 16px in from the photo's top right corner.
- Square cards: photo only, aspect-ratio: 312 / 313, no text and no bookmark.
- Sets: with products A B C D E the sets are A+B+C, B+C+D, C+D+E, D+E+A, E+A+B. The arrows loop.
- Changing set: all sets sit stacked in the same grid cell. The leaving set goes to opacity 0, blur(16px) and scale(0.985); the arriving set goes to opacity 1, no blur and scale(1). Opacity and blur take 620ms cubic-bezier(0.4, 0, 0.2, 1), scale takes 760ms cubic-bezier(0.22, 0.61, 0.36, 1). Inside the arriving set the three cards fade in with 0, 70 and 140ms delays.
- Card hover: the photo crossfades (450ms) to the product's second photo while both scale to 1.03 over 900ms. The title turns the accent color, and the bookmark dims to 85% until you hover it directly.
- Bookmark: toggles saved (filled) and unsaved (outline), with aria-pressed. Hover turns it the accent color and pressing shrinks it to 0.9.
- Touch: a horizontal swipe of more than 40px changes set.
- Accessibility: hidden sets are aria-hidden and inert, so nothing in them can be tabbed to.
- Under 1200px: the grid becomes one column (the wide card, then both squares full width), the label gap drops to 32px and the arrows to 28px. The card gap is 16px.
- Under 768px: only the wide card shows (its photo turns square), the description hides, and the title and price stack 6px apart at 13px with the price in the second color. Label 20px, gap 24px, arrows 20px below.
- Reduced motion: no blur and no scale; sets simply crossfade over 200ms.