[{"data":1,"prerenderedAt":5},["ShallowReactive",2],{"code-html-\u003C!-- Top\u002Fbottom section padding -->\n\u003Csec":3,"nav":4},"\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- Top\u002Fbottom section padding -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">section\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"pt4rem pb4rem px2rem\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">h2\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"mb16px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Section Title<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">h2\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Top 40px, bottom 40px inner gap<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">section\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- Scroll area bottom margin -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"h40rem oya pb4rem\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Scrollable content...<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Apply pb4rem so the last item is not clipped<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- Asymmetric card padding -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"pt2rem pr16px pb2-4rem pl16px bg18181B br8px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  Slightly wider gap at the bottom (visual balance)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\"><!-- Apply top\u002Fbottom simultaneously with py -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">section\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"py4rem px2rem\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  py4rem = pt4rem + pb4rem\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">section\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[],1775225739168]