[{"data":1,"prerenderedAt":921},["ShallowReactive",2],{"docs-navigation:en":3,"content-page:docs:xKWzzxZQITcgfhvj0JCHHR8fYzLU1Wh95HoaSHf7pr0":235,"content-page-surround:docs:xKWzzxZQITcgfhvj0JCHHR8fYzLU1Wh95HoaSHf7pr0":910,"i-logos:vue":913,"i-lucide:clipboard":918},[4,50,111,152,214],{"title":5,"page":6,"canonicalKey":7,"locale":8,"id":9,"draft":6,"icon":10,"sidebar":11,"children":12},"Start",false,"1","en","content:docs:1.start:.navigation.yml","i-lucide-rocket","section",[13,19,24,29,35,40,45],{"title":14,"id":15,"canonicalKey":16,"locale":8,"draft":6,"navigation":17,"path":18},"Why Nuxt Photo","content:docs:1.start:1.why-nuxt-photo.md","1\u002F1",{"title":14},"\u002Fdocs\u002Fstart\u002Fwhy-nuxt-photo",{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":6,"path":23},"Install Nuxt Photo","content:docs:1.start:2.installation.md","1\u002F2","\u002Fdocs\u002Fstart\u002Finstallation",{"title":25,"id":26,"canonicalKey":27,"locale":8,"draft":6,"path":28},"Build your first album","content:docs:1.start:3.build-your-first-album.md","1\u002F3","\u002Fdocs\u002Fstart\u002Fbuild-your-first-album",{"title":30,"id":31,"canonicalKey":32,"locale":8,"draft":6,"navigation":33,"path":34},"Choose a component","content:docs:1.start:4.choose-a-component.md","1\u002F4",{"title":30},"\u002Fdocs\u002Fstart\u002Fchoose-a-component",{"title":36,"id":37,"canonicalKey":38,"locale":8,"draft":6,"path":39},"Use Nuxt Photo with Vue","content:docs:1.start:5.plain-vue.md","1\u002F5","\u002Fdocs\u002Fstart\u002Fplain-vue",{"title":41,"id":42,"canonicalKey":43,"locale":8,"draft":6,"path":44},"Compare gallery approaches","content:docs:1.start:6.compare-approaches.md","1\u002F6","\u002Fdocs\u002Fstart\u002Fcompare-approaches",{"title":46,"id":47,"canonicalKey":48,"locale":8,"draft":6,"path":49},"Performance and bundle size","content:docs:1.start:7.performance-and-bundle-size.md","1\u002F7","\u002Fdocs\u002Fstart\u002Fperformance-and-bundle-size",{"title":51,"page":6,"canonicalKey":52,"locale":8,"id":53,"draft":6,"icon":54,"children":55},"Guides","2","content:docs:2.guides:.navigation.yml","i-lucide-route",[56,61,66,71,76,81,86,91,96,101,106],{"title":57,"id":58,"canonicalKey":59,"locale":8,"draft":6,"path":60},"Use CMS photos","content:docs:2.guides:1.use-cms-photos.md","2\u002F1","\u002Fdocs\u002Fguides\u002Fuse-cms-photos",{"title":62,"id":63,"canonicalKey":64,"locale":8,"draft":6,"path":65},"Use Nuxt Image","content:docs:2.guides:2.use-nuxt-image.md","2\u002F2","\u002Fdocs\u002Fguides\u002Fuse-nuxt-image",{"title":67,"id":68,"canonicalKey":69,"locale":8,"draft":6,"path":70},"Style with Tailwind","content:docs:2.guides:3.style-with-tailwind.md","2\u002F3","\u002Fdocs\u002Fguides\u002Fstyle-with-tailwind",{"title":72,"id":73,"canonicalKey":74,"locale":8,"draft":6,"path":75},"Share one lightbox","content:docs:2.guides:4.share-one-lightbox.md","2\u002F4","\u002Fdocs\u002Fguides\u002Fshare-one-lightbox",{"title":77,"id":78,"canonicalKey":79,"locale":8,"draft":6,"path":80},"Build a carousel","content:docs:2.guides:5.build-a-carousel.md","2\u002F5","\u002Fdocs\u002Fguides\u002Fbuild-a-carousel",{"title":82,"id":83,"canonicalKey":84,"locale":8,"draft":6,"path":85},"Tune responsive layouts","content:docs:2.guides:6.tune-responsive-layouts.md","2\u002F6","\u002Fdocs\u002Fguides\u002Ftune-responsive-layouts",{"title":87,"id":88,"canonicalKey":89,"locale":8,"draft":6,"path":90},"Create a custom thumbnail layout","content:docs:2.guides:7.create-a-custom-thumbnail-layout.md","2\u002F7","\u002Fdocs\u002Fguides\u002Fcreate-a-custom-thumbnail-layout",{"title":92,"id":93,"canonicalKey":94,"locale":8,"draft":6,"path":95},"Customize the built-in lightbox","content:docs:2.guides:8.customize-the-built-in-lightbox.md","2\u002F8","\u002Fdocs\u002Fguides\u002Fcustomize-the-built-in-lightbox",{"title":97,"id":98,"canonicalKey":99,"locale":8,"draft":6,"path":100},"Build a lightbox from primitives","content:docs:2.guides:9.build-a-lightbox-from-primitives.md","2\u002F9","\u002Fdocs\u002Fguides\u002Fbuild-a-lightbox-from-primitives",{"title":102,"id":103,"canonicalKey":104,"locale":8,"draft":6,"path":105},"Integrate a custom image service","content:docs:2.guides:10.integrate-a-custom-image-service.md","2\u002F10","\u002Fdocs\u002Fguides\u002Fintegrate-a-custom-image-service",{"title":107,"id":108,"canonicalKey":109,"locale":8,"draft":6,"path":110},"Control a lightbox programmatically","content:docs:2.guides:11.control-a-lightbox-programmatically.md","2\u002F11","\u002Fdocs\u002Fguides\u002Fcontrol-a-lightbox-programmatically",{"title":112,"page":6,"canonicalKey":113,"locale":8,"id":114,"draft":6,"icon":115,"children":116},"Concepts","3","content:docs:3.concepts:.navigation.yml","i-lucide-compass",[117,122,127,132,137,142,147],{"title":118,"id":119,"canonicalKey":120,"locale":8,"draft":6,"path":121},"Photo data and dimensions","content:docs:3.concepts:1.photo-data-and-dimensions.md","3\u002F1","\u002Fdocs\u002Fconcepts\u002Fphoto-data-and-dimensions",{"title":123,"id":124,"canonicalKey":125,"locale":8,"draft":6,"path":126},"Collections and navigation order","content:docs:3.concepts:2.collections-and-navigation-order.md","3\u002F2","\u002Fdocs\u002Fconcepts\u002Fcollections-and-navigation-order",{"title":128,"id":129,"canonicalKey":130,"locale":8,"draft":6,"path":131},"Layouts and responsive values","content:docs:3.concepts:3.layouts-and-responsive-values.md","3\u002F3","\u002Fdocs\u002Fconcepts\u002Flayouts-and-responsive-values",{"title":133,"id":134,"canonicalKey":135,"locale":8,"draft":6,"path":136},"SSR and layout stability","content:docs:3.concepts:4.ssr-and-layout-stability.md","3\u002F4","\u002Fdocs\u002Fconcepts\u002Fssr-and-layout-stability",{"title":138,"id":139,"canonicalKey":140,"locale":8,"draft":6,"path":141},"Image delivery","content:docs:3.concepts:5.image-delivery.md","3\u002F5","\u002Fdocs\u002Fconcepts\u002Fimage-delivery",{"title":143,"id":144,"canonicalKey":145,"locale":8,"draft":6,"path":146},"Lightbox, gestures, and accessibility","content:docs:3.concepts:6.lightbox-gestures-and-accessibility.md","3\u002F6","\u002Fdocs\u002Fconcepts\u002Flightbox-gestures-and-accessibility",{"title":148,"id":149,"canonicalKey":150,"locale":8,"draft":6,"path":151},"Customization levels","content:docs:3.concepts:7.customization-levels.md","3\u002F7","\u002Fdocs\u002Fconcepts\u002Fcustomization-levels",{"title":153,"id":154,"canonicalKey":155,"locale":8,"draft":6,"icon":156,"sidebar":11,"path":157,"children":158},"Reference","content:docs:4.reference:.navigation.yml","4","i-lucide-braces","\u002Fdocs\u002Freference",[159,164,169,174,179,184,189,194,199,204,209],{"title":160,"id":161,"canonicalKey":162,"locale":8,"draft":6,"path":163},"Photo","content:docs:4.reference:2.photo.md","4\u002F2","\u002Fdocs\u002Freference\u002Fphoto",{"title":165,"id":166,"canonicalKey":167,"locale":8,"draft":6,"path":168},"PhotoAlbum","content:docs:4.reference:3.photo-album.md","4\u002F3","\u002Fdocs\u002Freference\u002Fphoto-album",{"title":170,"id":171,"canonicalKey":172,"locale":8,"draft":6,"path":173},"PhotoGroup","content:docs:4.reference:4.photo-group.md","4\u002F4","\u002Fdocs\u002Freference\u002Fphoto-group",{"title":175,"id":176,"canonicalKey":177,"locale":8,"draft":6,"path":178},"PhotoCarousel","content:docs:4.reference:5.photo-carousel.md","4\u002F5","\u002Fdocs\u002Freference\u002Fphoto-carousel",{"title":180,"id":181,"canonicalKey":182,"locale":8,"draft":6,"path":183},"Lightbox","content:docs:4.reference:6.lightbox.md","4\u002F6","\u002Fdocs\u002Freference\u002Flightbox",{"title":185,"id":186,"canonicalKey":187,"locale":8,"draft":6,"path":188},"Lightbox primitives API","content:docs:4.reference:7.primitives.md","4\u002F7","\u002Fdocs\u002Freference\u002Fprimitives",{"title":190,"id":191,"canonicalKey":192,"locale":8,"draft":6,"path":193},"Composables","content:docs:4.reference:8.composables.md","4\u002F8","\u002Fdocs\u002Freference\u002Fcomposables",{"title":195,"id":196,"canonicalKey":197,"locale":8,"draft":6,"path":198},"Configuration and labels","content:docs:4.reference:9.configuration-and-labels.md","4\u002F9","\u002Fdocs\u002Freference\u002Fconfiguration-and-labels",{"title":200,"id":201,"canonicalKey":202,"locale":8,"draft":6,"path":203},"Types","content:docs:4.reference:10.types.md","4\u002F10","\u002Fdocs\u002Freference\u002Ftypes",{"title":205,"id":206,"canonicalKey":207,"locale":8,"draft":6,"path":208},"CSS","content:docs:4.reference:11.css.md","4\u002F11","\u002Fdocs\u002Freference\u002Fcss",{"title":210,"id":211,"canonicalKey":212,"locale":8,"draft":6,"path":213},"Package exports","content:docs:4.reference:12.package-exports.md","4\u002F12","\u002Fdocs\u002Freference\u002Fpackage-exports",{"title":215,"page":6,"canonicalKey":216,"locale":8,"id":217,"draft":6,"icon":218,"children":219},"Help","5","content:docs:5.help:.navigation.yml","i-lucide-life-buoy",[220,225,230],{"title":221,"id":222,"canonicalKey":223,"locale":8,"draft":6,"path":224},"Troubleshooting","content:docs:5.help:1.troubleshooting.md","5\u002F1","\u002Fdocs\u002Fhelp\u002Ftroubleshooting",{"title":226,"id":227,"canonicalKey":228,"locale":8,"draft":6,"path":229},"Known constraints","content:docs:5.help:2.known-constraints.md","5\u002F2","\u002Fdocs\u002Fhelp\u002Fknown-constraints",{"title":231,"id":232,"canonicalKey":233,"locale":8,"draft":6,"path":234},"Upgrade from 0.2 to 1.0","content:docs:5.help:3.upgrade-from-0-2-to-1-0.md","5\u002F3","\u002Fdocs\u002Fhelp\u002Fupgrade-from-0-2-to-1-0",{"title":128,"description":236,"body":237,"type":897,"id":129,"canonicalKey":130,"draft":6,"partial":6,"locale":8,"collection":898,"navigationFile":6,"file":899,"route":905,"resolution":907},"Choose rows, columns, or masonry and adapt numeric options to container width.",{"type":238,"children":239,"toc":889},"root",[240,253,260,336,341,345,351,363,692,697,732,736,742,747,752,873],{"type":241,"tag":242,"props":243,"children":244},"element","p",{},[245,251],{"type":241,"tag":246,"props":247,"children":248},"code",{},[249],{"type":250,"value":165},"text",{"type":250,"value":252}," provides three layouts. Numeric layout options can respond to the\nalbum container instead of the whole viewport.",{"type":241,"tag":254,"props":255,"children":257},"h2",{"id":256},"choose-a-layout",[258],{"type":250,"value":259},"Choose a layout",{"type":241,"tag":261,"props":262,"children":263},"table",{},[264,283],{"type":241,"tag":265,"props":266,"children":267},"thead",{},[268],{"type":241,"tag":269,"props":270,"children":271},"tr",{},[272,278],{"type":241,"tag":273,"props":274,"children":275},"th",{},[276],{"type":250,"value":277},"Layout",{"type":241,"tag":273,"props":279,"children":280},{},[281],{"type":250,"value":282},"Behavior",{"type":241,"tag":284,"props":285,"children":286},"tbody",{},[287,304,320],{"type":241,"tag":269,"props":288,"children":289},{},[290,299],{"type":241,"tag":291,"props":292,"children":293},"td",{},[294],{"type":241,"tag":246,"props":295,"children":296},{},[297],{"type":250,"value":298},"rows",{"type":241,"tag":291,"props":300,"children":301},{},[302],{"type":250,"value":303},"Images share a row height and expand to fill the available row.",{"type":241,"tag":269,"props":305,"children":306},{},[307,315],{"type":241,"tag":291,"props":308,"children":309},{},[310],{"type":241,"tag":246,"props":311,"children":312},{},[313],{"type":250,"value":314},"columns",{"type":241,"tag":291,"props":316,"children":317},{},[318],{"type":250,"value":319},"Images are assigned to a fixed number of vertical columns.",{"type":241,"tag":269,"props":321,"children":322},{},[323,331],{"type":241,"tag":291,"props":324,"children":325},{},[326],{"type":241,"tag":246,"props":327,"children":328},{},[329],{"type":250,"value":330},"masonry",{"type":241,"tag":291,"props":332,"children":333},{},[334],{"type":250,"value":335},"Images are assigned to columns to reduce differences in height.",{"type":241,"tag":242,"props":337,"children":338},{},[339],{"type":250,"value":340},"Rows are the default. Use columns when column count matters more than balanced\nheight. Use masonry when photos have varied aspect ratios and uneven columns\nare acceptable.",{"type":241,"tag":342,"props":343,"children":344},"album-layout-lab",{},[],{"type":241,"tag":254,"props":346,"children":348},{"id":347},"responsive-values",[349],{"type":250,"value":350},"Responsive values",{"type":241,"tag":242,"props":352,"children":353},{},[354,356,361],{"type":250,"value":355},"The ",{"type":241,"tag":246,"props":357,"children":358},{},[359],{"type":250,"value":360},"responsive()",{"type":250,"value":362}," helper creates a value from minimum container widths:",{"type":241,"tag":364,"props":365,"children":368},"pre",{"language":366,"class":367},"vue","shiki shiki-themes material-theme-lighter material-theme-palenight dark:material-theme-palenight",[369],{"type":241,"tag":246,"props":370,"children":372},{"class":371},"language-vue",[373,390,392,425,426,451,452,485,486,578,579,591,592,683,684],{"type":241,"tag":374,"props":375,"children":378},"span",{"class":376,"style":377},"line","display: inline",[379,385],{"type":241,"tag":374,"props":380,"children":382},{"style":381},"color:#39ADB5;--shiki-dark:#89DDFF",[383],{"type":250,"value":384},"\u003C",{"type":241,"tag":374,"props":386,"children":388},{"style":387},"color:#E53935;--shiki-dark:#F07178",[389],{"type":250,"value":165},{"type":250,"value":391},"\n",{"type":241,"tag":374,"props":393,"children":394},{"class":376,"style":377},[395,400,406,411,416,421],{"type":241,"tag":374,"props":396,"children":397},{"style":381},[398],{"type":250,"value":399},"  :",{"type":241,"tag":374,"props":401,"children":403},{"style":402},"color:#9C3EDA;--shiki-dark:#C792EA",[404],{"type":250,"value":405},"photos",{"type":241,"tag":374,"props":407,"children":408},{"style":381},[409],{"type":250,"value":410},"=",{"type":241,"tag":374,"props":412,"children":413},{"style":381},[414],{"type":250,"value":415},"\"",{"type":241,"tag":374,"props":417,"children":419},{"style":418},"color:#90A4AE;--shiki-dark:#BABED8",[420],{"type":250,"value":405},{"type":241,"tag":374,"props":422,"children":423},{"style":381},[424],{"type":250,"value":415},{"type":250,"value":391},{"type":241,"tag":374,"props":427,"children":428},{"class":376,"style":377},[429,433,438,442,446],{"type":241,"tag":374,"props":430,"children":431},{"style":381},[432],{"type":250,"value":399},{"type":241,"tag":374,"props":434,"children":435},{"style":402},[436],{"type":250,"value":437},"layout",{"type":241,"tag":374,"props":439,"children":440},{"style":381},[441],{"type":250,"value":410},{"type":241,"tag":374,"props":443,"children":444},{"style":381},[445],{"type":250,"value":415},{"type":241,"tag":374,"props":447,"children":448},{"style":381},[449],{"type":250,"value":450},"{",{"type":250,"value":391},{"type":241,"tag":374,"props":453,"children":454},{"class":376,"style":377},[455,460,465,470,475,480],{"type":241,"tag":374,"props":456,"children":457},{"style":387},[458],{"type":250,"value":459},"    type",{"type":241,"tag":374,"props":461,"children":462},{"style":381},[463],{"type":250,"value":464},":",{"type":241,"tag":374,"props":466,"children":467},{"style":381},[468],{"type":250,"value":469}," '",{"type":241,"tag":374,"props":471,"children":473},{"style":472},"color:#91B859;--shiki-dark:#C3E88D",[474],{"type":250,"value":314},{"type":241,"tag":374,"props":476,"children":477},{"style":381},[478],{"type":250,"value":479},"'",{"type":241,"tag":374,"props":481,"children":482},{"style":381},[483],{"type":250,"value":484},",",{"type":250,"value":391},{"type":241,"tag":374,"props":487,"children":488},{"class":376,"style":377},[489,494,498,504,509,513,519,523,528,532,537,541,546,550,555,559,564,569,574],{"type":241,"tag":374,"props":490,"children":491},{"style":387},[492],{"type":250,"value":493},"    columns",{"type":241,"tag":374,"props":495,"children":496},{"style":381},[497],{"type":250,"value":464},{"type":241,"tag":374,"props":499,"children":501},{"style":500},"color:#6182B8;--shiki-dark:#82AAFF",[502],{"type":250,"value":503}," responsive",{"type":241,"tag":374,"props":505,"children":506},{"style":418},[507],{"type":250,"value":508},"(",{"type":241,"tag":374,"props":510,"children":511},{"style":381},[512],{"type":250,"value":450},{"type":241,"tag":374,"props":514,"children":516},{"style":515},"color:#F76D47;--shiki-dark:#F78C6C",[517],{"type":250,"value":518}," 0",{"type":241,"tag":374,"props":520,"children":521},{"style":381},[522],{"type":250,"value":464},{"type":241,"tag":374,"props":524,"children":525},{"style":515},[526],{"type":250,"value":527}," 2",{"type":241,"tag":374,"props":529,"children":530},{"style":381},[531],{"type":250,"value":484},{"type":241,"tag":374,"props":533,"children":534},{"style":515},[535],{"type":250,"value":536}," 768",{"type":241,"tag":374,"props":538,"children":539},{"style":381},[540],{"type":250,"value":464},{"type":241,"tag":374,"props":542,"children":543},{"style":515},[544],{"type":250,"value":545}," 3",{"type":241,"tag":374,"props":547,"children":548},{"style":381},[549],{"type":250,"value":484},{"type":241,"tag":374,"props":551,"children":552},{"style":515},[553],{"type":250,"value":554}," 1200",{"type":241,"tag":374,"props":556,"children":557},{"style":381},[558],{"type":250,"value":464},{"type":241,"tag":374,"props":560,"children":561},{"style":515},[562],{"type":250,"value":563}," 4",{"type":241,"tag":374,"props":565,"children":566},{"style":381},[567],{"type":250,"value":568}," }",{"type":241,"tag":374,"props":570,"children":571},{"style":418},[572],{"type":250,"value":573},")",{"type":241,"tag":374,"props":575,"children":576},{"style":381},[577],{"type":250,"value":484},{"type":250,"value":391},{"type":241,"tag":374,"props":580,"children":581},{"class":376,"style":377},[582,587],{"type":241,"tag":374,"props":583,"children":584},{"style":381},[585],{"type":250,"value":586},"  }",{"type":241,"tag":374,"props":588,"children":589},{"style":381},[590],{"type":250,"value":415},{"type":250,"value":391},{"type":241,"tag":374,"props":593,"children":594},{"class":376,"style":377},[595,599,604,608,612,617,621,625,629,633,637,641,645,649,654,658,662,666,671,675,679],{"type":241,"tag":374,"props":596,"children":597},{"style":381},[598],{"type":250,"value":399},{"type":241,"tag":374,"props":600,"children":601},{"style":402},[602],{"type":250,"value":603},"spacing",{"type":241,"tag":374,"props":605,"children":606},{"style":381},[607],{"type":250,"value":410},{"type":241,"tag":374,"props":609,"children":610},{"style":381},[611],{"type":250,"value":415},{"type":241,"tag":374,"props":613,"children":614},{"style":500},[615],{"type":250,"value":616},"responsive",{"type":241,"tag":374,"props":618,"children":619},{"style":418},[620],{"type":250,"value":508},{"type":241,"tag":374,"props":622,"children":623},{"style":381},[624],{"type":250,"value":450},{"type":241,"tag":374,"props":626,"children":627},{"style":515},[628],{"type":250,"value":518},{"type":241,"tag":374,"props":630,"children":631},{"style":381},[632],{"type":250,"value":464},{"type":241,"tag":374,"props":634,"children":635},{"style":515},[636],{"type":250,"value":563},{"type":241,"tag":374,"props":638,"children":639},{"style":381},[640],{"type":250,"value":484},{"type":241,"tag":374,"props":642,"children":643},{"style":515},[644],{"type":250,"value":536},{"type":241,"tag":374,"props":646,"children":647},{"style":381},[648],{"type":250,"value":464},{"type":241,"tag":374,"props":650,"children":651},{"style":515},[652],{"type":250,"value":653}," 8",{"type":241,"tag":374,"props":655,"children":656},{"style":381},[657],{"type":250,"value":484},{"type":241,"tag":374,"props":659,"children":660},{"style":515},[661],{"type":250,"value":554},{"type":241,"tag":374,"props":663,"children":664},{"style":381},[665],{"type":250,"value":464},{"type":241,"tag":374,"props":667,"children":668},{"style":515},[669],{"type":250,"value":670}," 12",{"type":241,"tag":374,"props":672,"children":673},{"style":381},[674],{"type":250,"value":568},{"type":241,"tag":374,"props":676,"children":677},{"style":418},[678],{"type":250,"value":573},{"type":241,"tag":374,"props":680,"children":681},{"style":381},[682],{"type":250,"value":415},{"type":250,"value":391},{"type":241,"tag":374,"props":685,"children":686},{"class":376,"style":377},[687],{"type":241,"tag":374,"props":688,"children":689},{"style":418},[690],{"type":250,"value":691},"\u002F>",{"type":241,"tag":242,"props":693,"children":694},{},[695],{"type":250,"value":696},"At 700 pixels the album uses two columns. At 900 pixels it uses three. The\nlargest matching minimum width wins.",{"type":241,"tag":242,"props":698,"children":699},{},[700,704,706,710,712,717,719,724,726,730],{"type":241,"tag":246,"props":701,"children":702},{},[703],{"type":250,"value":360},{"type":250,"value":705}," can configure ",{"type":241,"tag":246,"props":707,"children":708},{},[709],{"type":250,"value":603},{"type":250,"value":711},", ",{"type":241,"tag":246,"props":713,"children":714},{},[715],{"type":250,"value":716},"padding",{"type":250,"value":718},", row ",{"type":241,"tag":246,"props":720,"children":721},{},[722],{"type":250,"value":723},"targetRowHeight",{"type":250,"value":725},", and\ncolumn or masonry ",{"type":241,"tag":246,"props":727,"children":728},{},[729],{"type":250,"value":314},{"type":250,"value":731},". It does not switch the layout type.",{"type":241,"tag":733,"props":734,"children":735},"responsive-lab",{},[],{"type":241,"tag":254,"props":737,"children":739},{"id":738},"container-width-not-viewport-width",[740],{"type":250,"value":741},"Container width, not viewport width",{"type":241,"tag":242,"props":743,"children":744},{},[745],{"type":250,"value":746},"A 700-pixel album uses the 700-pixel value even when the browser window is much\nwider. This makes the same album work inside full pages, cards, and sidebars.",{"type":241,"tag":242,"props":748,"children":749},{},[750],{"type":250,"value":751},"For a formula, pass a function that receives the container width:",{"type":241,"tag":364,"props":753,"children":754},{"language":366,"class":367},[755],{"type":241,"tag":246,"props":756,"children":757},{"class":371},[758],{"type":241,"tag":374,"props":759,"children":760},{"class":376,"style":377},[761,765,769,774,778,782,786,790,794,798,802,806,810,814,820,824,829,834,838,843,848,852,856,860,864,868],{"type":241,"tag":374,"props":762,"children":763},{"style":381},[764],{"type":250,"value":384},{"type":241,"tag":374,"props":766,"children":767},{"style":387},[768],{"type":250,"value":165},{"type":241,"tag":374,"props":770,"children":771},{"style":381},[772],{"type":250,"value":773}," :",{"type":241,"tag":374,"props":775,"children":776},{"style":402},[777],{"type":250,"value":405},{"type":241,"tag":374,"props":779,"children":780},{"style":381},[781],{"type":250,"value":410},{"type":241,"tag":374,"props":783,"children":784},{"style":381},[785],{"type":250,"value":415},{"type":241,"tag":374,"props":787,"children":788},{"style":418},[789],{"type":250,"value":405},{"type":241,"tag":374,"props":791,"children":792},{"style":381},[793],{"type":250,"value":415},{"type":241,"tag":374,"props":795,"children":796},{"style":381},[797],{"type":250,"value":773},{"type":241,"tag":374,"props":799,"children":800},{"style":402},[801],{"type":250,"value":603},{"type":241,"tag":374,"props":803,"children":804},{"style":381},[805],{"type":250,"value":410},{"type":241,"tag":374,"props":807,"children":808},{"style":381},[809],{"type":250,"value":415},{"type":241,"tag":374,"props":811,"children":812},{"style":381},[813],{"type":250,"value":508},{"type":241,"tag":374,"props":815,"children":817},{"style":816},"color:#90A4AE;--shiki-light-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[818],{"type":250,"value":819},"width",{"type":241,"tag":374,"props":821,"children":822},{"style":381},[823],{"type":250,"value":573},{"type":241,"tag":374,"props":825,"children":826},{"style":402},[827],{"type":250,"value":828}," =>",{"type":241,"tag":374,"props":830,"children":831},{"style":418},[832],{"type":250,"value":833}," (width ",{"type":241,"tag":374,"props":835,"children":836},{"style":381},[837],{"type":250,"value":384},{"type":241,"tag":374,"props":839,"children":840},{"style":515},[841],{"type":250,"value":842}," 640",{"type":241,"tag":374,"props":844,"children":845},{"style":381},[846],{"type":250,"value":847}," ?",{"type":241,"tag":374,"props":849,"children":850},{"style":515},[851],{"type":250,"value":563},{"type":241,"tag":374,"props":853,"children":854},{"style":381},[855],{"type":250,"value":773},{"type":241,"tag":374,"props":857,"children":858},{"style":515},[859],{"type":250,"value":670},{"type":241,"tag":374,"props":861,"children":862},{"style":418},[863],{"type":250,"value":573},{"type":241,"tag":374,"props":865,"children":866},{"style":381},[867],{"type":250,"value":415},{"type":241,"tag":374,"props":869,"children":870},{"style":418},[871],{"type":250,"value":872}," \u002F>",{"type":241,"tag":242,"props":874,"children":875},{},[876,878,887],{"type":250,"value":877},"Use ",{"type":241,"tag":879,"props":880,"children":881},"a",{"href":136},[882],{"type":241,"tag":246,"props":883,"children":884},{},[885],{"type":250,"value":886},"defaultContainerWidth",{"type":250,"value":888}," when the\nserver should render a specific responsive branch.",{"title":890,"searchDepth":891,"depth":891,"links":892},"",4,[893,895,896],{"id":256,"depth":894,"text":259},2,{"id":347,"depth":894,"text":350},{"id":738,"depth":894,"text":741},"markdown","docs",{"source":900,"path":901,"stem":902,"dir":903,"extension":904},"content","docs\u002F3.concepts\u002F3.layouts-and-responsive-values.md","docs\u002F3.concepts\u002F3.layouts-and-responsive-values","concepts","md",{"requestedPath":131,"resolvedPath":131,"alternates":906},[],{"requested":908,"resolved":909,"usedFallback":6},{},{"locale":8},{"previous":911,"next":912},{"title":123,"id":124,"canonicalKey":125,"locale":8,"draft":6,"path":126},{"title":133,"id":134,"canonicalKey":135,"locale":8,"draft":6,"path":136},{"left":914,"top":914,"width":915,"height":916,"rotate":914,"vFlip":6,"hFlip":6,"body":917},0,256,221,"\u003Cpath fill=\"#41b883\" d=\"M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0z\"\u002F>\u003Cpath fill=\"#41b883\" d=\"m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0z\"\u002F>\u003Cpath fill=\"#35495e\" d=\"M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0z\"\u002F>",{"left":914,"top":914,"width":919,"height":919,"rotate":914,"vFlip":6,"hFlip":6,"body":920},24,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"\u002F>\u003Cpath d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\u002F>\u003C\u002Fg>",1788702883543]