Render State:
Dual View
Desktop Focus
Mobile Focus
Highlight Card:
Card #1
Card #2
Card #3
Pause
Reset
01 / CONTENT SOURCE
INDEX.VUE
[CONTENT_ARRAY]
ITEM[0]: { id: "01", title: "A" }
ITEM[1]: { id: "02", title: "B" }
ITEM[2]: { id: "03", title: "C" }
02 / BREAKPOINT DECISION
GRID.VUE
MATCH_MEDIA()
IF (WIDTH >= 768PX)
ACTIVE: DUAL RENDER
03 / RENDER TARGETS
DESKTOP CARD GRID
CARD 1
CARD 2
CARD 3
MOBILE SWIPE CAROUSEL
CARD 1 (ACTIVE)
CARD 2
PROPS
>= 768PX
< 768PX
Hover or click nodes for operational context.