Neogrid
Category: Features
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="wrapper" style="display: flex; position: relative; width: 900px; height: 815.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; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 20px; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="wrapper" style="cursor: crosshair; display: grid; position: relative; width: 900px; height: 239.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; flex: 0 0 auto; flex-flow: row; justify-content: center; gap: 20px; grid-template-columns: 286.663px 286.663px 286.675px; grid-template-rows: 239.2px; opacity: 1; overflow: visible;"><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: 593.325px; height: 239.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; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-border="true" data-framer-name="Double" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(253, 253, 150); box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px; height: 239.2px; width: 593.325px; opacity: 1; display: flex; position: relative; 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: row; justify-content: flex-start; align-items: flex-start; overflow: hidden; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; cursor: crosshair; display: flex; position: relative; width: 336.663px; height: 239.2px; padding: 40px; 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: flex-start; gap: 20px; overflow: visible;"><div data-framer-name="wrapper" style="opacity: 1; cursor: crosshair; display: flex; position: relative; width: 256.663px; height: 159.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; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 20px; overflow: hidden;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 256.663px; height: 67.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; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><h3 data-styles-preset="WCABqTCb2" style="--framer-text-alignment: left; cursor: crosshair; display: block; position: static; width: 256.663px; height: 67.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: Epilogue, sans-serif; font-size: 28px; font-weight: 900; line-height: 33.6px; text-align: left; text-transform: uppercase; letter-spacing: -1.12px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Course builder that works</h3></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); transform: none; opacity: 1; position: relative; width: 256.663px; 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; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); cursor: crosshair; display: block; position: static; width: 256.663px; 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: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Create lessons with video text files and quizzes using an editor made for real teachers.</p></div></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 256.663px; height: 239.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; flex: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 20px; overflow: visible; cursor: crosshair;"><div style="position: absolute; border-radius: inherit; inset: 0px; display: block; width: 256.663px; height: 239.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; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;" data-framer-background-image-wrapper="true"><img decoding="async" loading="lazy" width="1440" height="1440" sizes="max(calc(max((min(100vw - 80px, 900px) - 40px) / 3, 50px) * 2 + 20px) / 2, 1px)" srcset="https://framerusercontent.com/images/B9FepLzwnHKs3Uo7u3cpntsAq4.jpg?scale-down-to=512 512w,https://framerusercontent.com/images/B9FepLzwnHKs3Uo7u3cpntsAq4.jpg?scale-down-to=1024 1024w,https://framerusercontent.com/images/B9FepLzwnHKs3Uo7u3cpntsAq4.jpg 1440w" src="https://framerusercontent.com/images/B9FepLzwnHKs3Uo7u3cpntsAq4.jpg" alt="" style="display: block; width: 256.663px; height: 239.2px; border-radius: inherit; object-position: left center; object-fit: cover; cursor: crosshair; position: static; 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: clip;"></div></div></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: 286.675px; height: 239.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; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-border="true" data-framer-name="Single" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px; width: 286.675px; opacity: 1; display: flex; position: relative; height: 239.2px; 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: row; justify-content: flex-start; align-items: flex-start; gap: 20px; overflow: hidden; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; cursor: crosshair; display: flex; position: relative; width: 286.675px; height: 239.2px; padding: 40px; 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 20px; overflow: visible;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 206.675px; height: 159.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; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 20px; overflow: hidden; cursor: crosshair;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 206.675px; height: 67.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; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><h3 data-styles-preset="WCABqTCb2" style="--framer-text-alignment: left; cursor: crosshair; display: block; position: static; width: 206.675px; height: 67.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: Epilogue, sans-serif; font-size: 28px; font-weight: 900; line-height: 33.6px; text-align: left; text-transform: uppercase; letter-spacing: -1.12px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Built-in automation</h3></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 206.675px; 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; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; display: block; position: static; width: 206.675px; height: 72px; border: 0px none rgb(119, 119, 119); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(119, 119, 119); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Send reminders updates and certificates without lifting a finger.</p></div></div></div></div></div></div></div><div data-framer-name="wrapper" style="display: grid; position: relative; width: 900px; height: 263.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; flex: 0 0 auto; flex-flow: row; justify-content: center; gap: 20px; grid-template-columns: 286.663px 286.663px 286.663px; grid-template-rows: 263.2px; opacity: 1; overflow: visible; cursor: crosshair;"><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: 286.663px; height: 263.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; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-border="true" data-framer-name="Single" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px; width: 286.663px; opacity: 1; display: flex; position: relative; height: 263.2px; 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: row; justify-content: flex-start; align-items: flex-start; gap: 20px; overflow: hidden; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 286.663px; height: 263.2px; padding: 40px; 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 20px; overflow: visible; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 206.663px; height: 183.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; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 20px; overflow: hidden; cursor: crosshair;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 206.663px; height: 67.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; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><h3 data-styles-preset="WCABqTCb2" style="--framer-text-alignment: left; display: block; position: static; width: 206.663px; height: 67.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: Epilogue, sans-serif; font-size: 28px; font-weight: 900; line-height: 33.6px; text-align: left; text-transform: uppercase; letter-spacing: -1.12px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">One place for everything</h3></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 206.663px; height: 96px; 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: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; display: block; position: static; width: 206.663px; height: 96px; border: 0px none rgb(119, 119, 119); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(119, 119, 119); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">No need to jump between tools manage content students and results from one dashboard.</p></div></div></div></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: 593.338px; height: 263.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; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-border="true" data-framer-name="Double" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(218, 245, 240); box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px; height: 263.2px; width: 593.338px; opacity: 1; display: flex; position: relative; 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: row; justify-content: flex-start; align-items: flex-start; overflow: hidden; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 336.675px; height: 239.2px; padding: 40px; 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: flex-start; gap: 20px; overflow: visible; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 256.675px; height: 159.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; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 20px; overflow: hidden; cursor: crosshair;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 256.675px; height: 67.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; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><h3 data-styles-preset="WCABqTCb2" style="--framer-text-alignment: left; display: block; position: static; width: 256.675px; height: 67.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: Epilogue, sans-serif; font-size: 28px; font-weight: 900; line-height: 33.6px; text-align: left; text-transform: uppercase; letter-spacing: -1.12px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Track how students learn</h3></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); transform: none; opacity: 1; position: relative; width: 256.675px; 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; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 256.675px; 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: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">See who is active who is falling behind and who is ready to move forward.</p></div></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 256.675px; height: 263.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; flex: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 20px; overflow: visible; cursor: crosshair;"><div style="position: absolute; border-radius: inherit; inset: 0px; display: block; width: 256.675px; height: 263.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; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;" data-framer-background-image-wrapper="true"><img decoding="async" loading="lazy" width="1632" height="1700" sizes="max(calc(max((min(100vw - 80px, 900px) - 40px) / 3, 50px) * 2 + 20px) / 2, 1px)" srcset="https://framerusercontent.com/images/57gEMIWo5fVfYH8U0Icfx15y3w.jpg?scale-down-to=1024 983w,https://framerusercontent.com/images/57gEMIWo5fVfYH8U0Icfx15y3w.jpg 1632w" src="https://framerusercontent.com/images/57gEMIWo5fVfYH8U0Icfx15y3w.jpg" alt="" style="display: block; width: 256.675px; height: 263.2px; border-radius: inherit; object-position: left center; object-fit: cover; position: static; 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: clip; cursor: crosshair;"></div></div></div></div></div></div><div data-framer-name="wrapper" style="display: grid; position: relative; width: 900px; height: 272.8px; 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; gap: 20px; grid-template-columns: 286.663px 286.663px 286.675px; grid-template-rows: 272.8px; opacity: 1; overflow: visible; cursor: crosshair;"><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: 593.325px; height: 272.8px; 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-border="true" data-framer-name="Double" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(248, 214, 179); box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px; height: 272.8px; width: 593.325px; opacity: 1; display: flex; position: relative; 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: row; justify-content: flex-start; align-items: flex-start; overflow: hidden; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 336.663px; height: 239.2px; padding: 40px; 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: flex-start; gap: 20px; overflow: visible; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 256.663px; height: 159.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; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 20px; overflow: hidden; cursor: crosshair;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 256.663px; height: 67.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; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><h3 data-styles-preset="WCABqTCb2" style="--framer-text-alignment: left; display: block; position: static; width: 256.663px; height: 67.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: Epilogue, sans-serif; font-size: 28px; font-weight: 900; line-height: 33.6px; text-align: left; text-transform: uppercase; letter-spacing: -1.12px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Fun smooth way to learn</h3></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); transform: none; opacity: 1; position: relative; width: 256.663px; 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; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 256.663px; 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: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Keep students engaged with clean design fast navigation and mobile friendly lessons.</p></div></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 256.663px; height: 272.8px; 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 20px; overflow: visible; cursor: crosshair;"><div style="position: absolute; border-radius: inherit; inset: 0px; display: block; width: 256.663px; height: 272.8px; 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;" data-framer-background-image-wrapper="true"><img decoding="async" loading="lazy" width="1400" height="1400" sizes="max(calc(max((min(100vw - 80px, 900px) - 40px) / 3, 50px) * 2 + 20px) / 2, 1px)" srcset="https://framerusercontent.com/images/vDQ7ak5Ei3mkekUKvp0mNbJ8.jpg?scale-down-to=512 512w,https://framerusercontent.com/images/vDQ7ak5Ei3mkekUKvp0mNbJ8.jpg?scale-down-to=1024 1024w,https://framerusercontent.com/images/vDQ7ak5Ei3mkekUKvp0mNbJ8.jpg 1400w" src="https://framerusercontent.com/images/vDQ7ak5Ei3mkekUKvp0mNbJ8.jpg" alt="" style="display: block; width: 256.663px; height: 272.8px; border-radius: inherit; object-position: left center; object-fit: cover; position: static; 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: clip; cursor: crosshair;"></div></div></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: 286.675px; height: 272.8px; 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-border="true" data-framer-name="Single" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px; width: 286.675px; opacity: 1; display: flex; position: relative; height: 272.8px; 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: row; justify-content: flex-start; align-items: flex-start; gap: 20px; overflow: hidden; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 286.675px; height: 272.8px; padding: 40px; 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: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 20px; overflow: visible; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 206.675px; height: 192.8px; 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: 20px; overflow: hidden; cursor: crosshair;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 206.675px; height: 100.8px; 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: crosshair;" data-framer-component-type="RichTextContainer"><h3 data-styles-preset="WCABqTCb2" style="--framer-text-alignment: left; display: block; position: static; width: 206.675px; height: 100.8px; 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: Epilogue, sans-serif; font-size: 28px; font-weight: 900; line-height: 33.6px; text-align: left; text-transform: uppercase; letter-spacing: -1.12px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Quick setup no tech stress</h3></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 206.675px; 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; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; display: block; position: static; width: 206.675px; height: 72px; border: 0px none rgb(119, 119, 119); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(119, 119, 119); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Launch your course in days not weeks with no need for coding or complex tools.</p></div></div></div></div></div></div></div></div>
create a canvas to display a feature component. we want the feature component to be centered and the space around it to be flexible empty.
reproduce this feature component
Created by: LandingHero
