[{"data":1,"prerenderedAt":227},["ShallowReactive",2],{"page:en:parallax":3},[4],{"id":5,"title":6,"body":7,"description":215,"extension":219,"meta":220,"navigation":221,"path":222,"seo":223,"stem":225,"__hash__":226},"page\u002Fen\u002Fparallax.md","Parallax + Grid",{"type":8,"value":9,"toc":214},"minimark",[10,25,64,74,154,202],[11,12,16,21],"parallax-section",{"className":13,":hero":15},[14],"hero","true",[17,18,20],"h1",{"id":19},"hybrid","Hybrid.",[22,23,24],"p",{},"Parallax meets Grid — all from markdown",[11,26,27],{},[28,29,30,51],"grid-container",{},[31,32,34,39],"grid-cell",{"size":33},"6,4",[35,36,38],"h2",{"id":37},"left-column","Left Column",[22,40,41,42,46,47,50],{},"This content lives inside a ",[43,44,45],"code",{},"GridCell"," with ",[43,48,49],{},"size=\"6,4\""," — 6 columns on desktop, 4 on mobile. The grid system handles responsive sizing automatically.",[31,52,53,57],{"size":33},[35,54,56],{"id":55},"right-column","Right Column",[22,58,59,60,63],{},"Both columns sit inside a ",[43,61,62],{},"GridContainer",", which is itself an MDC block. The gutter and centering come from the grid mixins — no custom CSS needed.",[11,65,68,71],{"className":66},[67],"quote",[22,69,70],{},"\"Grid layout and parallax effects in one file, authored entirely in markdown.\"",[22,72,73],{},"— This Markdown File",[75,76,77,106],"parallax-horizontal-scroll",{},[11,78,82],{"className":79,":wide":15,"depth":81},[80],"section-grid-2col","0.3",[28,83,84,97],{},[31,85,86,90],{"size":33},[35,87,89],{"id":88},"two-column-panel","Two-Column Panel",[22,91,92,93,96],{},"This is a parallax section that scrolls horizontally — and its content respects the grid system. The ",[43,94,95],{},"wide"," prop removes the max-width constraint.",[31,98,99,103],{"size":33},[35,100,102],{"id":101},"grid-inside-parallax","Grid Inside Parallax",[22,104,105],{},"Each column aligns to the same grid as the rest of the page. Resize the window to see responsive behavior inside the horizontal scroll.",[11,107,111],{"className":108,":wide":15,"depth":110},[109],"section-grid-3col","0.4",[28,112,113,124,145],{},[31,114,116,121],{"size":115},"4,4",[117,118,120],"h3",{"id":119},"card-1","Card 1",[22,122,123],{},"Three equal columns inside the second horizontal panel.",[31,125,126,130],{"size":115},[117,127,129],{"id":128},"card-2","Card 2",[22,131,132,133,137,138,137,142,144],{},"Markdown formatting works: ",[134,135,136],"strong",{},"bold",", ",[139,140,141],"em",{},"italic",[43,143,43],{},".",[31,146,147,151],{"size":115},[117,148,150],{"id":149},"card-3","Card 3",[22,152,153],{},"Grid + parallax + horizontal scroll — all from markdown.",[75,155,158,174,188],{"background-src":156,"background-width":157},"\u002Fvideos\u002Fservices_desktop.mp4","200vw",[11,159,162],{"className":160,":wide":15,":instant":15},[161],"background-demo",[28,163,164],{},[31,165,167,171],{"size":166},"5,4",[35,168,170],{"id":169},"panoramic-background","Panoramic #background",[22,172,173],{},"Slide 1 — left column content sits on top of the panning background.",[11,175,177],{"className":176,":wide":15,":instant":15},[161],[28,178,179],{},[31,180,182,185],{"size":166,"margin":181},"7,0",[35,183,170],{"id":184},"panoramic-background-1",[22,186,187],{},"Slide 2 — right column; the panorama keeps sliding under the text.",[11,189,191],{"className":190,":wide":15,":instant":15},[161],[28,192,193],{},[31,194,196,199],{"size":33,"margin":195},"3,0",[35,197,170],{"id":198},"panoramic-background-2",[22,200,201],{},"Slide 3 — centered block as the panorama reaches its right edge.",[11,203,207,211],{"className":204,":overlap":15,"id":206},[205],"section-finale","finale",[35,208,210],{"id":209},"thats-the-hybrid","That's the hybrid",[22,212,213],{},"Parallax sections with grid layouts, horizontal scrolling, and quotes — all authored in one markdown file per locale.",{"title":215,"searchDepth":216,"depth":216,"links":217},"",2,[218],{"id":209,"depth":216,"text":210},"md",{},true,"\u002Fen\u002Fparallax",{"title":6,"description":224},"Combining parallax effects with grid layout in a single markdown file.","en\u002Fparallax","sFXHdGSd2B5aU4BF8v39vKAiv98Wtu2mEHzS2mClI2s",1778618128095]