Add pop-out style to dynamic grid

src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css

@@ -250,4 +250,23 @@
 			}
 		}
 	}
+
+	&.dynamic-grid--style-pop-out {
+		.tile {
+			overflow: visible;
+
+			.tile-content {
+				transform: translateY(-20px) translateX(20px);
+				box-shadow: -10px 10px 0px #00000026;
+			}
+
+			.tile-image {
+				grid-row: 1/3 !important;
+			}
+
+			.tile-image--vertical {
+				grid-row: 1/5 !important;
+			}
+		}
+	}
 }

src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.jdd.tsx

@@ -10,6 +10,7 @@ const component_arguments = {
 	bleed: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue(
 		"none"
 	),
+	style: new ComponentArguments.Enum(["flat", "pop-out"]),
 	tiles: new ComponentArguments.List(
 		new ComponentArguments.Structured({
 			title: new ComponentArguments.ShortText(),
@@ -90,14 +91,19 @@ export class DynamicGridV2 extends Component<typeof component_arguments> {
 	}
 
 	toHTML({
-		args: { tiles, bleed },
+		args: { tiles, bleed, style },
 		jdd_context,
 		classes,
 		index,
 	}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
 		return (
 			<div
-				class={["dynamic-grid", `dynamic-grid--bleed-${bleed}`, ...classes]}
+				class={[
+					"dynamic-grid",
+					`dynamic-grid--bleed-${bleed}`,
+					`dynamic-grid--style-${style}`,
+					...classes,
+				]}
 				style={`--jdd-index: ${index}`}
 			>
 				<div class="tiles-container">