merge with summary new variations

packages/assets/css/src/scss/_components/_summary-box/_elements/_elements.scss

@@ -3,3 +3,5 @@
 @forward "./summary-box-body";
 @forward "./summary-box-list";
 @forward "./summary-box-footer";
+@forward "./summary-box-content";
+@forward "./summary-box-row";

packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-body.scss

@@ -24,6 +24,10 @@
 				height: 100%;
 				padding: $spacing-lg;
 
+				@include media(max-width, sm) {
+					padding: $spacing-md;
+				}
+
 				* {
 					margin: 0;
 				}

packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-content.scss

@@ -0,0 +1,41 @@
+@use "sass:math";
+@use "../../../_utils/utils" as *;
+
+/// Build Summary box content
+///
+/// @type block
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin build-content($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			@include element(content) {
+				background: $summary-content-background;
+				border-radius: $summary-content-border-radius;
+				padding: $summary-content-padding-lg;
+				width: calc(50% - $summary-row-gap-md / 2);
+
+				@include modifier(fluid) {
+					flex: 1 1 100%;
+					width: 100%;
+				}
+
+				// Stack on mobile
+				@include media(max-width, sm) {
+					width: 100%;
+				}
+
+				@include modifier(md) {
+					padding: $summary-content-padding-md;
+
+					@include media(max-width, sm) {
+						padding: $summary-content-padding-sm;
+					}
+				}
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-row.scss

@@ -0,0 +1,29 @@
+@use "sass:math";
+@use "../../../_utils/utils" as *;
+
+/// Build Summary box content
+///
+/// @type block
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin build-row($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			@include element(row) {
+				display: flex;
+				gap: $summary-row-gap-md;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				width: 100%;
+
+				// Smaller gap on mobile
+				@include media(max-width, sm) {
+					gap: $summary-row-gap-sm;
+				}
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_summary-box/_summary-box.scss

@@ -4,4 +4,6 @@
 @include sui-summary-box--element.build-header(summary-box);
 @include sui-summary-box--element.build-body(summary-box);
 @include sui-summary-box--element.build-list(summary-box);
-@include sui-summary-box--element.build-footer(summary-box);
+@include sui-summary-box--element.build-footer(summary-box);
+@include sui-summary-box--element.build-content(summary-box);
+@include sui-summary-box--element.build-row(summary-box);