[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"quiz-css-color-mix-native-color-mixing":32,"quiz-article-css-color-mix-native-color-mixing":48},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"kind":35,"title":36,"description":37,"config":38,"verticalId":5,"vertical":43,"course":40,"_count":44,"access":45,"attempts":47,"questionCount":39},"019fe776-8f61-731d-a629-257c1a7f998c","css-color-mix-native-color-mixing","PRACTICE_QUIZ","color-mix() — native CSS color blending","For years, blending or shading a color in CSS meant reaching for Sass. color-mix() does it natively: two colors, a ratio, and a color space, resolved by the browser at runtime. These questions check the ratio semantics, why the color space argument changes the result, how it maps onto the old Sass functions, and how it degrades in older browsers.",{"questionCount":39,"timeLimitSec":40,"shuffleQuestions":18,"shuffleOptions":17,"negativeMarking":19,"passScorePct":41,"maxAttempts":40,"revealAnswers":42,"allowFlagging":18,"allowBacktracking":17},7,null,70,"IMMEDIATE",{"slug":6,"name":7},{"questions":39},{"allowed":17,"reason":46},"FREE",[],{"id":49,"slug":34,"title":50,"subtitle":40,"excerpt":51,"coverUrl":52,"locale":13,"readingMinutes":53,"publishedAt":54,"viewCount":55,"likeCount":19,"commentCount":19,"author":56,"vertical":61,"topic":62,"tags":65,"_count":77,"playground":79,"body":80,"bodyMd":244,"seo":245,"translationGroupId":248,"thread":249,"assessments":251,"translations":254,"quiz":256},"019fe660-a1fc-740c-9df4-b60a02de8afa","You reach for Sass to mix colors. `color-mix()` does it natively.","Sass's `darken()`, `lighten()`, and `mix()` functions solved real problems CSS couldn't handle for decades. `color-mix()` is the native answer, and it ships in every modern browser with no build step required.","\u002Fmedia\u002Fcovers\u002Fcss-color-mix-native-color-mixing.png",4,"2026-07-29T08:47:34.803Z",58,{"id":57,"name":58,"username":59,"avatarUrl":40,"headline":60},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},"css","CSS",[66,68,71,74],{"slug":63,"name":67,"color":40},"Css",{"slug":69,"name":70,"color":40},"webdev","Webdev",{"slug":72,"name":73,"color":40},"frontend","Frontend",{"slug":75,"name":76,"color":40},"javascript","Javascript",{"assessments":78},1,{"slug":34,"title":36},{"blocks":81,"version":78},[82,86,89,94,97,102,105,109,112,115,118,121,125,128,131,134,137,141,144,147,150,154,157,161,164,167,171,174,177,180,183,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235],{"id":83,"html":84,"type":85},"b1","\u003Cp>Every design system has this pattern: one brand color, eight shade variants, a slightly darkened hover state, and a lightened disabled state. For years, CSS had no way to produce those programmatically. You either committed all twelve values by hand or you pulled in Sass for its \u003Ccode>darken()\u003C\u002Fcode>, \u003Ccode>lighten()\u003C\u002Fcode>, and \u003Ccode>mix()\u003C\u002Fcode> functions.\u003C\u002Fp>","paragraph",{"id":87,"html":88,"type":85},"b2","\u003Cp>\u003Ccode>color-mix()\u003C\u002Fcode> is the native CSS answer. It has been in every major browser since mid-2023, and it removes the preprocessor dependency entirely.\u003C\u002Fp>",{"id":90,"html":91,"text":92,"type":93,"level":31},"b3","What \u003Ccode>color-mix()\u003C\u002Fcode> does","What color-mix() does","heading",{"id":95,"html":96,"type":85},"b4","\u003Cp>The function blends two colors at a specified ratio inside a chosen color space.\u003C\u002Fp>",{"id":98,"code":99,"type":100,"language":63,"highlight":101},"b5","color-mix(in \u003Ccolor-space>, \u003Ccolor1> \u003Cpercentage>, \u003Ccolor2>)","code",[],{"id":103,"html":104,"type":85},"b6","\u003Cp>In practice:\u003C\u002Fp>",{"id":106,"code":107,"type":100,"language":63,"highlight":108},"b7",".button {\n  background: color-mix(in srgb, #3b82f6 80%, black);\n}",[],{"id":110,"html":111,"type":85},"b8","\u003Cp>That gives you \u003Ccode>#3b82f6\u003C\u002Fcode> mixed 80% with black — a darkened variant of your brand blue. Swap \u003Ccode>black\u003C\u002Fcode> for \u003Ccode>white\u003C\u002Fcode> and you get a lightened variant.\u003C\u002Fp>",{"id":113,"html":114,"type":85},"b9","\u003Cp>The percentage controls how much of \u003Ccode>color1\u003C\u002Fcode> survives in the blend. \u003Ccode>80%\u003C\u002Fcode> means 80% of the first color and 20% of the second. You can also specify both percentages explicitly: \u003Ccode>color-mix(in srgb, blue 30%, red 70%)\u003C\u002Fcode>.\u003C\u002Fp>",{"id":116,"html":117,"text":117,"type":93,"level":31},"b10","Why the color space argument matters",{"id":119,"html":120,"type":85},"b11","\u003Cp>This is the part most tutorials rush past. The color space changes what the blend actually looks like.\u003C\u002Fp>",{"id":122,"code":123,"type":100,"language":63,"highlight":124},"b12","\u002F* Midpoint mix: srgb vs oklch *\u002F\n.demo-srgb  { background: color-mix(in srgb,  #0000ff 50%, #ffff00); }\n.demo-oklch { background: color-mix(in oklch, #0000ff 50%, #ffff00); }",[],{"id":126,"html":127,"type":85},"b13","\u003Cp>In \u003Ccode>srgb\u003C\u002Fcode>, mixing blue and yellow at 50% produces a muddy gray — the channels average to near-neutral values. In \u003Ccode>oklch\u003C\u002Fcode> (a perceptually uniform color space), the midpoint is a vivid violet-green, because the mix travels through perceptually meaningful color space rather than raw channel math.\u003C\u002Fp>",{"id":129,"html":130,"type":85},"b14","\u003Cp>For tints and shades — mixing your brand color with white or black — the difference is more subtle but still real. \u003Ccode>oklch\u003C\u002Fcode> tends to preserve the perceived saturation of the original color better than \u003Ccode>srgb\u003C\u002Fcode> as you move toward white or black. \u003Ccode>srgb\u003C\u002Fcode> is predictable and is the right default when you want results that match what Sass historically produced.\u003C\u002Fp>",{"id":132,"html":133,"text":133,"type":93,"level":31},"b15","Replacing Sass color functions",{"id":135,"html":136,"type":85},"b16","\u003Cp>Sass's three most-used color manipulation functions map directly to \u003Ccode>color-mix()\u003C\u002Fcode>:\u003C\u002Fp>",{"id":138,"code":139,"type":100,"language":63,"highlight":140},"b17","\u002F* Sass: darken($color, 15%) *\u002F\ncolor-mix(in srgb, var(--brand) 85%, black)\n\n\u002F* Sass: lighten($color, 15%) *\u002F\ncolor-mix(in srgb, var(--brand) 85%, white)\n\n\u002F* Sass: mix($color1, $color2, 60%) *\u002F\ncolor-mix(in srgb, var(--color1) 60%, var(--color2))",[],{"id":142,"html":143,"type":85},"b18","\u003Cp>The Sass percentage refers to how much \u003Cem>change\u003C\u002Fem> to apply; the \u003Ccode>color-mix()\u003C\u002Fcode> percentage refers to how much of the first color \u003Cem>remains\u003C\u002Fem>. That means \u003Ccode>darken($color, 15%)\u003C\u002Fcode> becomes \u003Ccode>color-mix(in srgb, $color 85%, black)\u003C\u002Fcode> — subtract the darkening amount from 100.\u003C\u002Fp>",{"id":145,"html":146,"text":146,"type":93,"level":31},"b19","Building a token system without a preprocessor",{"id":148,"html":149,"type":85},"b20","\u003Cp>The real power emerges when you combine \u003Ccode>color-mix()\u003C\u002Fcode> with CSS custom properties. You can define a single source color and derive the full scale from it, entirely in CSS.\u003C\u002Fp>",{"id":151,"code":152,"type":100,"language":63,"highlight":153},"b21",":root {\n  --brand: #3b82f6;\n\n  --brand-50:  color-mix(in oklch, var(--brand) 10%, white);\n  --brand-100: color-mix(in oklch, var(--brand) 20%, white);\n  --brand-200: color-mix(in oklch, var(--brand) 35%, white);\n  --brand-300: color-mix(in oklch, var(--brand) 55%, white);\n  --brand-400: color-mix(in oklch, var(--brand) 75%, white);\n  --brand-500: var(--brand);\n  --brand-600: color-mix(in oklch, var(--brand) 85%, black);\n  --brand-700: color-mix(in oklch, var(--brand) 70%, black);\n  --brand-800: color-mix(in oklch, var(--brand) 55%, black);\n  --brand-900: color-mix(in oklch, var(--brand) 35%, black);\n}",[],{"id":155,"html":156,"type":85},"b22","\u003Cp>Now a button component can use the scale without knowing any hex values:\u003C\u002Fp>",{"id":158,"code":159,"type":100,"language":63,"highlight":160},"b23",".button {\n  background: var(--brand-500);\n  border-color: var(--brand-600);\n  color: white;\n}\n\n.button:hover {\n  background: var(--brand-600);\n  border-color: var(--brand-700);\n}\n\n.button:disabled {\n  background: var(--brand-200);\n  color: var(--brand-400);\n}",[],{"id":162,"html":163,"type":85},"b24","\u003Cp>Change \u003Ccode>--brand\u003C\u002Fcode> in one place and every derived shade updates automatically — across the entire page, in every component, with no build step and no recompilation.\u003C\u002Fp>",{"id":165,"html":166,"type":85},"b25","\u003Cp>This also composes cleanly with theme switching:\u003C\u002Fp>",{"id":168,"code":169,"type":100,"language":63,"highlight":170},"b26","@media (prefers-color-scheme: dark) {\n  :root {\n    --brand: #60a5fa; \u002F* lighter blue reads better on dark backgrounds *\u002F\n  }\n}",[],{"id":172,"html":173,"type":85},"b27","\u003Cp>The full shade scale re-derives itself from the new source color without any additional changes.\u003C\u002Fp>",{"id":175,"html":176,"text":176,"type":93,"level":31},"b28","Browser support",{"id":178,"html":179,"type":85},"b29","\u003Cp>\u003Ccode>color-mix()\u003C\u002Fcode> is \u003Cstrong>Baseline 2023\u003C\u002Fstrong>: Chrome 111 (March 2023), Firefox 113 (May 2023), Safari 16.2 (December 2022).\u003C\u002Fp>",{"id":181,"html":182,"type":85},"b30","\u003Cp>Unsupported browsers ignore the declaration, so the fallback is whatever value appeared before — usually the original custom property. For a graceful fallback, supply a pre-computed value first:\u003C\u002Fp>",{"id":184,"code":185,"type":100,"language":63,"highlight":186},"b31",".button {\n  background: #3b82f6; \u002F* fallback *\u002F\n  background: color-mix(in oklch, var(--brand) 100%, transparent);\n}",[],{"id":188,"html":189,"type":85},"b32","\u003Cp>There is no polyfill needed for the browsers that ship to production today.\u003C\u002Fp>",{"id":191,"html":192,"type":85},"b33","\u003C!-- playground:start -->",{"id":194,"html":195,"text":195,"type":93,"level":31},"b34","🎮 Try it yourself",{"id":197,"html":198,"type":85},"b35","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-29-css-color-mix-native-color-mixing\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":200,"html":201,"type":85},"b36","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":203,"html":204,"type":85},"b37","\u003C!-- playground:end -->",{"id":206,"html":207,"type":85},"b38","\u003C!-- quiz:start -->",{"id":209,"html":210,"text":210,"type":93,"level":31},"b39","🧠 Test yourself",{"id":212,"html":213,"type":85},"b40","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-29-css-color-mix-native-color-mixing\">Take the 7-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":215,"html":216,"type":85},"b41","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":218,"html":219,"type":85},"b42","\u003C!-- quiz:end -->",{"id":221,"html":222,"text":222,"type":93,"level":31},"b43","The takeaway",{"id":224,"html":225,"type":85},"b44","\u003Cp>Search your codebase for \u003Ccode>darken(\u003C\u002Fcode>, \u003Ccode>lighten(\u003C\u002Fcode>, or \u003Ccode>mix(\u003C\u002Fcode> from Sass. Each one is a preprocessor dependency that now has a native CSS equivalent. Replace them with \u003Ccode>color-mix()\u003C\u002Fcode> and move the color scale into custom properties so the whole system reacts to a single source value.\u003C\u002Fp>",{"id":227,"html":228,"type":85},"b45","\u003Cp>The native platform keeps absorbing what used to need a build step. Color manipulation was one of the last practical reasons to reach for a CSS preprocessor in new projects. That reason is gone.\u003C\u002Fp>",{"id":230,"type":231},"b46","divider",{"id":233,"html":234,"type":85},"b47","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":236,"type":237,"items":238,"ordered":18},"b48","list",[239,240,241,242,243],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","Every design system has this pattern: one brand color, eight shade variants, a slightly darkened hover state, and a lightened disabled state. For years, CSS had no way to produce those programmatically. You either committed all twelve values by hand or you pulled in Sass for its `darken()`, `lighten()`, and `mix()` functions.\n\n`color-mix()` is the native CSS answer. It has been in every major browser since mid-2023, and it removes the preprocessor dependency entirely.\n\n## What `color-mix()` does\n\nThe function blends two colors at a specified ratio inside a chosen color space.\n\n```css\ncolor-mix(in \u003Ccolor-space>, \u003Ccolor1> \u003Cpercentage>, \u003Ccolor2>)\n```\n\nIn practice:\n\n```css\n.button {\n  background: color-mix(in srgb, #3b82f6 80%, black);\n}\n```\n\nThat gives you `#3b82f6` mixed 80% with black — a darkened variant of your brand blue. Swap `black` for `white` and you get a lightened variant.\n\nThe percentage controls how much of `color1` survives in the blend. `80%` means 80% of the first color and 20% of the second. You can also specify both percentages explicitly: `color-mix(in srgb, blue 30%, red 70%)`.\n\n## Why the color space argument matters\n\nThis is the part most tutorials rush past. The color space changes what the blend actually looks like.\n\n```css\n\u002F* Midpoint mix: srgb vs oklch *\u002F\n.demo-srgb  { background: color-mix(in srgb,  #0000ff 50%, #ffff00); }\n.demo-oklch { background: color-mix(in oklch, #0000ff 50%, #ffff00); }\n```\n\nIn `srgb`, mixing blue and yellow at 50% produces a muddy gray — the channels average to near-neutral values. In `oklch` (a perceptually uniform color space), the midpoint is a vivid violet-green, because the mix travels through perceptually meaningful color space rather than raw channel math.\n\nFor tints and shades — mixing your brand color with white or black — the difference is more subtle but still real. `oklch` tends to preserve the perceived saturation of the original color better than `srgb` as you move toward white or black. `srgb` is predictable and is the right default when you want results that match what Sass historically produced.\n\n## Replacing Sass color functions\n\nSass's three most-used color manipulation functions map directly to `color-mix()`:\n\n```css\n\u002F* Sass: darken($color, 15%) *\u002F\ncolor-mix(in srgb, var(--brand) 85%, black)\n\n\u002F* Sass: lighten($color, 15%) *\u002F\ncolor-mix(in srgb, var(--brand) 85%, white)\n\n\u002F* Sass: mix($color1, $color2, 60%) *\u002F\ncolor-mix(in srgb, var(--color1) 60%, var(--color2))\n```\n\nThe Sass percentage refers to how much *change* to apply; the `color-mix()` percentage refers to how much of the first color *remains*. That means `darken($color, 15%)` becomes `color-mix(in srgb, $color 85%, black)` — subtract the darkening amount from 100.\n\n## Building a token system without a preprocessor\n\nThe real power emerges when you combine `color-mix()` with CSS custom properties. You can define a single source color and derive the full scale from it, entirely in CSS.\n\n```css\n:root {\n  --brand: #3b82f6;\n\n  --brand-50:  color-mix(in oklch, var(--brand) 10%, white);\n  --brand-100: color-mix(in oklch, var(--brand) 20%, white);\n  --brand-200: color-mix(in oklch, var(--brand) 35%, white);\n  --brand-300: color-mix(in oklch, var(--brand) 55%, white);\n  --brand-400: color-mix(in oklch, var(--brand) 75%, white);\n  --brand-500: var(--brand);\n  --brand-600: color-mix(in oklch, var(--brand) 85%, black);\n  --brand-700: color-mix(in oklch, var(--brand) 70%, black);\n  --brand-800: color-mix(in oklch, var(--brand) 55%, black);\n  --brand-900: color-mix(in oklch, var(--brand) 35%, black);\n}\n```\n\nNow a button component can use the scale without knowing any hex values:\n\n```css\n.button {\n  background: var(--brand-500);\n  border-color: var(--brand-600);\n  color: white;\n}\n\n.button:hover {\n  background: var(--brand-600);\n  border-color: var(--brand-700);\n}\n\n.button:disabled {\n  background: var(--brand-200);\n  color: var(--brand-400);\n}\n```\n\nChange `--brand` in one place and every derived shade updates automatically — across the entire page, in every component, with no build step and no recompilation.\n\nThis also composes cleanly with theme switching:\n\n```css\n@media (prefers-color-scheme: dark) {\n  :root {\n    --brand: #60a5fa; \u002F* lighter blue reads better on dark backgrounds *\u002F\n  }\n}\n```\n\nThe full shade scale re-derives itself from the new source color without any additional changes.\n\n## Browser support\n\n`color-mix()` is **Baseline 2023**: Chrome 111 (March 2023), Firefox 113 (May 2023), Safari 16.2 (December 2022).\n\nUnsupported browsers ignore the declaration, so the fallback is whatever value appeared before — usually the original custom property. For a graceful fallback, supply a pre-computed value first:\n\n```css\n.button {\n  background: #3b82f6; \u002F* fallback *\u002F\n  background: color-mix(in oklch, var(--brand) 100%, transparent);\n}\n```\n\nThere is no polyfill needed for the browsers that ship to production today.\n\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-29-css-color-mix-native-color-mixing\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 7-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-29-css-color-mix-native-color-mixing)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n## The takeaway\n\nSearch your codebase for `darken(`, `lighten(`, or `mix(` from Sass. Each one is a preprocessor dependency that now has a native CSS equivalent. Replace them with `color-mix()` and move the color scale into custom properties so the whole system reacts to a single source value.\n\nThe native platform keeps absorbing what used to need a build step. Color manipulation was one of the last practical reasons to reach for a CSS preprocessor in new projects. That reason is gone.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":50,"canonical":246,"description":247},"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fcss-color-mix-native-color-mixing","Sass's `darken()`, `lighten()`, and `mix()` functions solved real problems CSS couldn't handle for decades. `color-mix()` is the native answer, and it ships in every modern browser","019fe660-a1fc-740c-9df4-baf4d1378bf3",{"id":250,"locked":18},"019fe660-a8ec-753d-a085-2ba3acfa046a",[252],{"id":33,"slug":34,"title":36,"_count":253},{"questions":39},[255],{"locale":13,"slug":34},{"id":33,"slug":34,"title":36,"_count":257,"questionCount":39},{"questions":39}]