[{"data":1,"prerenderedAt":228},["ShallowReactive",2],{"page:br:parallax":3},[4],{"id":5,"title":6,"body":7,"description":216,"extension":220,"meta":221,"navigation":222,"path":223,"seo":224,"stem":226,"__hash__":227},"page\u002Fbr\u002Fparallax.md","Parallax + Grid",{"type":8,"value":9,"toc":215},"minimark",[10,25,64,74,155,203],[11,12,16,21],"parallax-section",{"className":13,":hero":15},[14],"hero","true",[17,18,20],"h1",{"id":19},"híbrido","Híbrido.",[22,23,24],"p",{},"Parallax encontra Grid — tudo a partir de 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},"coluna-esquerda","Coluna Esquerda",[22,40,41,42,46,47,50],{},"Este conteúdo está dentro de um ",[43,44,45],"code",{},"GridCell"," com ",[43,48,49],{},"size=\"6,4\""," — 6 colunas no desktop, 4 no mobile. O sistema de grid lida com o dimensionamento responsivo automaticamente.",[31,52,53,57],{"size":33},[35,54,56],{"id":55},"coluna-direita","Coluna Direita",[22,58,59,60,63],{},"Ambas as colunas estão dentro de um ",[43,61,62],{},"GridContainer",", que também é um bloco MDC. O gutter e a centralização vêm dos mixins de grid — sem CSS customizado.",[11,65,68,71],{"className":66},[67],"quote",[22,69,70],{},"\"Layout de grid e efeitos parallax em um único arquivo, escrito inteiramente em markdown.\"",[22,72,73],{},"— Este Arquivo Markdown",[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},"painel-de-duas-colunas","Painel de Duas Colunas",[22,91,92,93,96],{},"Esta é uma seção parallax que rola horizontalmente — e seu conteúdo respeita o sistema de grid. A prop ",[43,94,95],{},"wide"," remove a restrição de largura máxima.",[31,98,99,103],{"size":33},[35,100,102],{"id":101},"grid-dentro-do-parallax","Grid Dentro do Parallax",[22,104,105],{},"Cada coluna se alinha ao mesmo grid do restante da página. Redimensione a janela para ver o comportamento responsivo dentro do scroll horizontal.",[11,107,111],{"className":108,":wide":15,"depth":110},[109],"section-grid-3col","0.4",[28,112,113,124,146],{},[31,114,116,121],{"size":115},"4,4",[117,118,120],"h3",{"id":119},"card-1","Card 1",[22,122,123],{},"Três colunas iguais dentro do segundo painel horizontal.",[31,125,126,130],{"size":115},[117,127,129],{"id":128},"card-2","Card 2",[22,131,132,133,137,138,137,142,145],{},"Formatação markdown funciona: ",[134,135,136],"strong",{},"negrito",", ",[139,140,141],"em",{},"itálico",[43,143,144],{},"código",".",[31,147,148,152],{"size":115},[117,149,151],{"id":150},"card-3","Card 3",[22,153,154],{},"Grid + parallax + scroll horizontal — tudo a partir de markdown.",[75,156,159,175,189],{"background-src":157,"background-width":158},"\u002Fvideos\u002Fservices_desktop.mp4","200vw",[11,160,163],{"className":161,":wide":15,":instant":15},[162],"background-demo",[28,164,165],{},[31,166,168,172],{"size":167},"5,4",[35,169,171],{"id":170},"background-panorâmico","#background panorâmico",[22,173,174],{},"Slide 1 — conteúdo na coluna esquerda sobre o fundo que pana.",[11,176,178],{"className":177,":wide":15,":instant":15},[162],[28,179,180],{},[31,181,183,186],{"size":167,"margin":182},"7,0",[35,184,171],{"id":185},"background-panorâmico-1",[22,187,188],{},"Slide 2 — coluna direita; o panorama continua deslizando por trás do texto.",[11,190,192],{"className":191,":wide":15,":instant":15},[162],[28,193,194],{},[31,195,197,200],{"size":33,"margin":196},"3,0",[35,198,171],{"id":199},"background-panorâmico-2",[22,201,202],{},"Slide 3 — bloco centralizado quando o panorama alcança a borda direita.",[11,204,208,212],{"className":205,":overlap":15,"id":207},[206],"section-finale","finale",[35,209,211],{"id":210},"é-isso","É isso",[22,213,214],{},"Seções parallax com layouts de grid, scroll horizontal e citações — tudo escrito em um único arquivo markdown por idioma.",{"title":216,"searchDepth":217,"depth":217,"links":218},"",2,[219],{"id":210,"depth":217,"text":211},"md",{},true,"\u002Fbr\u002Fparallax",{"title":6,"description":225},"Combinando efeitos parallax com layout de grid em um único arquivo markdown.","br\u002Fparallax","FdkpuNN7xzHqcAohxtypJ8DV4hlj13U4jZuDeK7BFCA",1778618128202]