Faq section in greyscale
Category: FAQ
I'm sharing you a component below for reference the HTML structure with the exact COMPUTED CSS styles inlined into the style tags. Use this to understand exactly how it looks (dimensions, colors, flexbox behavior):
<div data-framer-name="FAQ" style="display: flex; position: relative; width: 720px; height: 831.6px; max-width: 720px; padding: 100px 20px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(16, 16, 16); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 36px; opacity: 1; overflow: hidden; cursor: crosshair;"><div data-framer-name="Headline Wrapper" style="cursor: crosshair; display: flex; position: relative; width: 600px; height: 271.6px; max-width: 600px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 24px; opacity: 1; overflow: hidden;"><div data-framer-name="Pre-Heading" style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; transform: none; position: relative; width: 600px; height: 14px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; opacity: 1; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yr7jYRDM8" style="--framer-text-alignment: center; display: block; position: static; width: 600px; height: 14px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; text-align: center; text-transform: uppercase; letter-spacing: 1.4px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">FAQ</p></div><div data-framer-name="Headline" style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; transform: none; position: relative; width: 600px; height: 158.4px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; opacity: 1; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><h2 data-styles-preset="MjgZga9ES" style="--framer-text-alignment: center; display: block; position: static; width: 600px; height: 158.4px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 72px; font-weight: 400; line-height: 79.2px; text-align: center; letter-spacing: -0.72px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><span data-text-fill="true" style="background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(207, 207, 207) 100%) 0% 0% / auto repeat scroll padding-box text rgba(0, 0, 0, 0); cursor: crosshair; display: inline-block; position: static; width: 614.4px; height: 172.8px; margin: -7.2px; padding: 7.2px; border: 0px none rgb(255, 255, 255); color: rgb(255, 255, 255); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 72px; font-weight: 400; line-height: 79.2px; text-align: center; letter-spacing: -0.72px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Frequently Asked Questions</span></h2></div><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="Description" style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; transform: none; position: relative; width: 600px; height: 51.2px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; opacity: 1; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="XxqZPjuZS" style="--framer-text-alignment: center; display: block; position: static; width: 600px; height: 51.2px; border: 0px none rgb(207, 207, 207); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(207, 207, 207); font-family: Inter, sans-serif; font-size: 16px; font-weight: 400; line-height: 25.6px; text-align: center; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Everything you need to know about how Altair works, what's included, and what to expect — no guesswork, just clarity.</p></div></div></div><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div style="display: block; position: relative; width: 680px; height: 324px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="Desktop" style="width: 680px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; height: 324px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: center; align-items: center; gap: 12px; opacity: 1; overflow: hidden; cursor: crosshair;"><div style="will-change: transform; opacity: 1; transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 680px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible; cursor: crosshair;"><div data-border="true" data-highlight="true" style="--border-bottom-width: 1px; --border-color: rgba(255, 255, 255, 0.12); --border-left-width: 1px; --border-right-width: 1px; --border-style: solid; --border-top-width: 1px; backdrop-filter: blur(12px); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(16, 16, 16, 0.2); width: 680px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; height: 72px; padding: 24px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: center; align-items: center; gap: 12px; opacity: 1; overflow: hidden; cursor: pointer;" tabindex="0" data-framer-name="Closed"><div data-framer-name="Question Wrapper" style="transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; width: 632px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 10px; opacity: 1; overflow: visible; cursor: pointer;"><div data-framer-name="Question" style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; --extracted-1eung3n: var(--token-7c705c36-79aa-4810-b24c-27290e26d9f6, rgb(11, 12, 13)); transform: none; transform-origin: 50% 50% 0px; position: relative; width: 598px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; opacity: 1; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><h4 data-styles-preset="wpBHbsRL1" style="display: block; position: static; width: 598px; height: 24px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 20px; font-weight: 500; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">How customizable is Altair?</h4></div><div style="transform: none; will-change: transform; transform-origin: 50% 50% 0px; display: block; position: relative; width: 24px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"><!--$--><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24" color="var(--token-97713889-0bc4-4aa6-b488-fc681d150de4, rgb(255, 255, 255))" style="user-select: none; width: 24px; height: 24px; display: inline-block; fill: var(--token-97713889-0bc4-4aa6-b488-fc681d150de4, rgb(255, 255, 255)); flex: 0 0 auto; position: static; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path></svg></div><!--/$--></div></div></div></div><div style="will-change: transform; opacity: 1; transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 680px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible; cursor: crosshair;"><div data-border="true" data-framer-name="Closed" data-highlight="true" style="--border-bottom-width: 1px; --border-color: rgba(255, 255, 255, 0.12); --border-left-width: 1px; --border-right-width: 1px; --border-style: solid; --border-top-width: 1px; backdrop-filter: blur(12px); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(16, 16, 16, 0.2); width: 680px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; height: 72px; padding: 24px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: center; align-items: center; gap: 12px; opacity: 1; overflow: hidden; cursor: pointer;" tabindex="0"><div data-framer-name="Question Wrapper" style="transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: flex; position: relative; width: 632px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 10px; overflow: visible; cursor: pointer;"><div data-framer-name="Question" style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; transform-origin: 50% 50% 0px; opacity: 1; position: relative; width: 598px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><h4 data-styles-preset="wpBHbsRL1" style="display: block; position: static; width: 598px; height: 24px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 20px; font-weight: 500; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Is Altair compatible with all devices?</h4></div><div style="transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: block; position: relative; width: 24px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible; cursor: pointer;"><!--$--><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24" color="var(--token-97713889-0bc4-4aa6-b488-fc681d150de4, rgb(255, 255, 255))" style="user-select: none; width: 24px; height: 24px; display: inline-block; fill: var(--token-97713889-0bc4-4aa6-b488-fc681d150de4, rgb(255, 255, 255)); flex: 0 0 auto; position: static; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path></svg></div><!--/$--></div></div></div></div><div style="will-change: transform; opacity: 1; transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 680px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible; cursor: crosshair;"><div data-border="true" data-framer-name="Closed" data-highlight="true" style="--border-bottom-width: 1px; --border-color: rgba(255, 255, 255, 0.12); --border-left-width: 1px; --border-right-width: 1px; --border-style: solid; --border-top-width: 1px; backdrop-filter: blur(12px); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(16, 16, 16, 0.2); width: 680px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; height: 72px; padding: 24px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: center; align-items: center; gap: 12px; opacity: 1; overflow: hidden; cursor: pointer;" tabindex="0"><div data-framer-name="Question Wrapper" style="transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: flex; position: relative; width: 632px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 10px; overflow: visible; cursor: pointer;"><div data-framer-name="Question" style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; transform-origin: 50% 50% 0px; opacity: 1; position: relative; width: 598px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><h4 data-styles-preset="wpBHbsRL1" style="display: block; position: static; width: 598px; height: 24px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 20px; font-weight: 500; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">How quickly can I launch my site with Altair?</h4></div><div style="transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: block; position: relative; width: 24px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible; cursor: pointer;"><!--$--><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24" color="var(--token-97713889-0bc4-4aa6-b488-fc681d150de4, rgb(255, 255, 255))" style="user-select: none; width: 24px; height: 24px; display: inline-block; fill: var(--token-97713889-0bc4-4aa6-b488-fc681d150de4, rgb(255, 255, 255)); flex: 0 0 auto; position: static; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path></svg></div><!--/$--></div></div></div></div><div style="will-change: transform; opacity: 1; transform: none; transform-origin: 50% 50% 0px; display: block; position: relative; width: 680px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible; cursor: crosshair;"><div data-border="true" data-highlight="true" style="--border-bottom-width: 1px; --border-color: rgba(255, 255, 255, 0.12); --border-left-width: 1px; --border-right-width: 1px; --border-style: solid; --border-top-width: 1px; backdrop-filter: blur(12px); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(16, 16, 16, 0.2); width: 680px; transform: none; transform-origin: 50% 50% 0px; display: flex; position: relative; height: 72px; padding: 24px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: center; align-items: center; gap: 12px; opacity: 1; overflow: hidden; cursor: pointer;" tabindex="0" data-framer-name="Closed"><div data-framer-name="Question Wrapper" style="transform: none; transform-origin: 50% 50% 0px; opacity: 1; display: flex; position: relative; width: 632px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 10px; overflow: visible; cursor: pointer;"><div data-framer-name="Question" style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; transform-origin: 50% 50% 0px; opacity: 1; position: relative; width: 598px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><h4 data-styles-preset="wpBHbsRL1" style="display: block; position: static; width: 598px; height: 24px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 20px; font-weight: 500; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Can Altair scale with my business’ growth?</h4></div><div style="transform: none; will-change: transform; transform-origin: 50% 50% 0px; opacity: 1; display: block; position: relative; width: 24px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible; cursor: pointer;"><!--$--><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24" color="var(--token-97713889-0bc4-4aa6-b488-fc681d150de4, rgb(255, 255, 255))" style="user-select: none; width: 24px; height: 24px; display: inline-block; fill: var(--token-97713889-0bc4-4aa6-b488-fc681d150de4, rgb(255, 255, 255)); flex: 0 0 auto; position: static; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; opacity: 1; overflow: hidden; cursor: pointer;"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"></path></svg></div><!--/$--></div></div></div></div></div></div></div></div>
create a canvas to display a faq component. we want the faq component to be centered and the space around it to be flexible empty.
reproduce this faq component
Created by: LandingHero
