make me a bento grid generator where i can adjust the parameters

<section class="features"> <header class="features-header"> <h2 class="features-title">Publish from anywhere with your frontmatter blog</h2> <p class="features-description">Why should you be left out of a cross device writing experience because you’re using a static site? Bureau takes away the pain of manually moving posts to your codebase and gives you the writing experience you need.</p> </header> <div class="bento-container"> <section class="bento-section bento-section-primary"> <div class="bento-body"> <h3 class="bento-title"> <span aria-hidden="true"><svg width="24" height="24"><use href="#automated"></svg></span> Automated versioning with Git </h3> <p class="bento-description">When you create a new post Bureau automatically creates a branch—keep working on drafts as long as you need. Open a pull request when you’re done and find yourself publishing more than ever.</p> </div> <div class="bento-image-container"> <img srcset="images/git-versioning.png 1x, images/git-versioning@2x.png 2x" width="468" height="376"> </div> </section> <section class="bento-section bento-section-primary"> <div class="bento-body"> <h3 class="bento-title"> <span aria-hidden="true"><svg width="24" height="24"><use href="#autocomplete"></svg></span> Component autocomplete </h3> <p class="bento-description">Bureau finds MDX components and autocompletes them for you—taking the best bits of a code editor combined with a beautiful writing experience. Start writing a component for autocomplete or use the menu.</p> </div> <div class="bento-image-container"> <img srcset="images/component-autocomplete.png 1x, images/component-autocomplete@2x.png 2x" width="468" height="376"> </div> </section> <section class="bento-section bento-section-secondary"> <div class="bento-body"> <h3 class="bento-title"> <span aria-hidden="true"><svg width="24" height="24"><use href="#markdown"></svg></span> Markdown as standard </h3> <p class="bento-description">Bureau provides a first-class markdown editing experience, by using the same library as you.</p> </div> <div class="bento-image-container"> <img srcset="images/markdown-menu.png 1x, images/markdown-menu@2x.png 2x" width="232" height="342"> </div> </section> <section class="bento-section bento-section-primary"> <div class="bento-body"> <h3 class="bento-title"> <span aria-hidden="true"><svg width="24" height="24"><use href="#contextual_token"></svg></span> Frontmatter templates </h3> <p class="bento-description">It’s pretty tedious starting a new frontmatter post, isn’t it? The editor works with your frontmatter and will generate timestamps, ID’s and more. All with a simple setup—we’ll find your config or generate one with Bureau.</p> </div> <div class="bento-image-container"> <img srcset="images/frontmatter-templates.png 1x, images/frontmatter-templates@2x.png 2x" width="468" height="376"> </div> </section> <section class="bento-section bento-section-tertiary"> <div class="bento-body"> <h3 class="bento-title"> <span aria-hidden="true"><svg width="24" height="24"><use href="#typed"></svg></span> Typed content </h3> <p class="bento-description">Bureau will look to see if your frontmatter is typed and if not you can let Bureau know.</p> </div> </section> <section class="bento-section bento-section-tertiary"> <div class="bento-body"> <h3 class="bento-title"> <span aria-hidden="true"><svg width="24" height="24"><use href="#automated"></svg></span>Works with your code </h3> <p class="bento-description">Bureau doesn’t care about the framework you use. Add your Git repository or start a new one and Bureau will look after your content. This is the publishing experience for static websites.</p> </div> </section> </div> </section>

.bento-container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr); grid-auto-flow: dense; gap: 1rem; }

<div class="w-full max-w-[1328px] grid grid-cols-12 grid-flow-dense xl:auto-rows-fr gap-4">

.bento-section-primary { grid-column: span 6; grid-row: span 4; }

.bento-section-secondary { grid-column: span 3; grid-row: span 4; }

.bento-section-tertiary { grid-column: span 3; grid-row: span 2; }