(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[84909],{94410:(s,e,r)=>{"use strict";r.d(e,{A:()=>i});var a=r(24299),l=r(67133);let i=(0,a.I)(l.uS)({name:"Space",class:"s1hfctpl",propsAsIs:!0});r(67807)},76382:(s,e,r)=>{"use strict";r.d(e,{I4:()=>t,Qc:()=>i,sD:()=>n,y6:()=>p});var a=r(24299),l=r(3069);let i=(0,a.I)("div")({name:"GridStructure",class:"g1nrkimi",propsAsIs:!1}),p=(0,a.I)("div")({name:"BaseCodeWrapper",class:"bu47715",propsAsIs:!1}),t=(0,a.I)(l.P.div)({name:"LabeledColumn",class:"ljraie7",propsAsIs:!0}),n=(0,a.I)(l.P.div)({name:"LabeledRow",class:"l12tgnsh",propsAsIs:!0});r(24982)},54938:(s,e,r)=>{"use strict";r.d(e,{A:()=>n});var a=r(29549),l=r(24299),i=r(3069);let p=(0,l.I)(i.P.div)({name:"Wrapper",class:"wg9umku",propsAsIs:!0}),t=(0,l.I)(i.P.div)({name:"InnerWrapper",class:"iizukyq",propsAsIs:!0}),n=function(s){let{ref:e,primary:r,layout:l=!0,style:n={},wrapperStyle:c={},textWrapperStyle:o={},children:d,...u}=s;return(0,a.jsx)(p,{ref:e,layout:l,initial:{borderRadius:4},style:{background:r?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...n},...u,children:(0,a.jsx)(t,{layout:l,initial:{borderRadius:2},style:{color:r?"black":"var(--color-text)",background:r?"hsl(50deg 100% 50%)":"var(--color-gray-100)",...c},children:(0,a.jsx)(i.P.span,{layout:l,style:{display:"inline-block",...o},children:d})})})};r(54084)},84909:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>x});var a=r(29549),l=r(24299),i=r(3069),p=r(94410),t=r(54938),n=r(76382);let c=(0,l.I)(p.A)({name:"OuterWrapper",class:"o1w3llm5",propsAsIs:!0}),o=(0,l.I)(i.P.div)({name:"Wrapper",class:"w14hfahb",propsAsIs:!0}),d=(0,l.I)(i.P.div)({name:"Layer",class:"l1xs16s2",propsAsIs:!0}),u=(0,l.I)(d)({name:"BackLayer",class:"b15a70gb",propsAsIs:!0}),I=(0,l.I)("div")({name:"ChildWrapper",class:"c15b0oxp",propsAsIs:!1}),h=(0,l.I)(t.A)({name:"Item",class:"ipox9eo",propsAsIs:!0}),m=(0,l.I)("img")({name:"Annotation",class:"a1hf8ucj",propsAsIs:!1}),x=function(){let s="90px 90px";return(0,a.jsx)(c,{children:(0,a.jsxs)(o,{children:[(0,a.jsxs)(u,{children:[(0,a.jsxs)(n.Qc,{style:{gridTemplateColumns:s,gap:2},children:[(0,a.jsx)(n.I4,{children:"C1"}),(0,a.jsx)(n.I4,{children:"C2"})]}),(0,a.jsx)(m,{alt:"Arrow illustrating the leftover space",src:"/images/interactive-guide-to-grid/extra-space.svg"})]}),(0,a.jsx)(d,{children:(0,a.jsxs)(I,{style:{gridTemplateColumns:s,justifyItems:"center"},children:[(0,a.jsx)(h,{style:{width:82}}),(0,a.jsx)(h,{style:{width:82}})]})})]})})};r(33047)},24982:s=>{s.exports={g1nrkimi:"g1nrkimi",bu47715:"bu47715",ljraie7:"ljraie7",l12tgnsh:"l12tgnsh"}},54084:s=>{s.exports={wg9umku:"wg9umku",fadeFromTransparent:"fadeFromTransparent",iizukyq:"iizukyq"}},33047:s=>{s.exports={o1w3llm5:"o1w3llm5",w14hfahb:"w14hfahb",l1xs16s2:"l1xs16s2",b15a70gb:"b15a70gb",c15b0oxp:"c15b0oxp",ipox9eo:"ipox9eo",a1hf8ucj:"a1hf8ucj"}}}]);
//# sourceMappingURL=84909.5f35b7d39d8bff99.js.map