fix(ui): use minmax for bento grid to prevent overflow

app/[locale]/opengraph-image.tsx

@@ -10,7 +10,7 @@ export const runtime = 'nodejs';
 export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Index.meta' });
-  
+
   const fonts = await getOgFonts();
   const bg = getOgBackground();
   const logo = getOgLogo();
@@ -27,4 +27,4 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
       fonts,
     },
   );
-}
+}

components/blocks/CompetenceBentoGrid.tsx

@@ -70,7 +70,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
               <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-4">{title}</h3>
             </div>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[220px]">
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[minmax(220px,auto)]">
              {/* Simplified static grid */}
           </div>
         </Container>
@@ -88,7 +88,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
           </div>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[220px] px-4 md:px-0">
+        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[minmax(220px,auto)] px-4 md:px-0">
           {items.map((item, idx) => {
             const isLarge = item.size === 'large';
             const isMedium = item.size === 'medium';