Add 600px object group card variant

patterns/object-group-card.html

@@ -90,7 +90,24 @@
     </div>
   </section>
 
+  <section id="pattern-object-group-card-height-600">
+    <p class="sg-preview-label">Pattern: Object Group Card</p>
+    <p class="sg-body sg-object-group-card__hint">Variante: identisch, nur die Höhe ist 600px.</p>
+    <div class="sg-object-card-grid sg-object-group-card--height-600" aria-label="Objekt Group Card Höhe 600px"></div>
+  </section>
+
   <script>
+    const populateObjectGroupCardVariant = () => {
+      const sourceGrid = document.querySelector('#pattern-object-group-card .sg-object-card-grid');
+      const variantGrid = document.querySelector('#pattern-object-group-card-height-600 .sg-object-card-grid');
+
+      if (!sourceGrid || !variantGrid || variantGrid.children.length > 0) {
+        return;
+      }
+
+      variantGrid.innerHTML = sourceGrid.innerHTML;
+    };
+
     const updateObjectCardGridRowState = () => {
       document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
         const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
@@ -124,7 +141,10 @@
       });
     };
 
-    window.addEventListener('load', updateObjectCardGridRowState);
+    window.addEventListener('load', () => {
+      populateObjectGroupCardVariant();
+      updateObjectCardGridRowState();
+    });
     window.addEventListener('resize', updateObjectCardGridRowState);
   </script>
 

styles/23-patterns-object-group-card.css

@@ -13,6 +13,10 @@
   height: var(--layout-object-group-card-height);
 }
 
+.sg-object-group-card--height-600 .sg-object-card[data-pattern="object-group-card"] {
+  height: var(--layout-object-card-height);
+}
+
 @media (max-width: 767px) {
   .sg-object-card[data-pattern="object-group-card"] {
     height: auto;