Add margin+padding options for background wrapper

src/back/jdd-components/background-wrapper/background-wrapper.css

@@ -6,6 +6,10 @@
 
 	padding: var(--vertical-padding) 0;
 
+	&.background-wrapper--padding-no {
+		padding: 0;
+	}
+
 	& > * {
 		grid-column: content;
 	}

src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx

@@ -11,6 +11,8 @@ export const background_variants = ["variant1", "variant2"];
 const component_arguments = {
 	variant: new ComponentArguments.Enum(background_variants),
 	grow_to_screen_height: new ComponentArguments.Boolean(),
+	padding: new ComponentArguments.Boolean(),
+	margin: new ComponentArguments.Boolean(),
 	content: new ComponentArguments.NestedComponent(),
 } as const;
 
@@ -28,7 +30,7 @@ export class BackgroundWrapper extends Component<typeof component_arguments> {
 	}
 
 	async toHTML({
-		args: { variant, content, grow_to_screen_height },
+		args: { variant, content, grow_to_screen_height, padding, margin },
 		classes,
 		jdd_context,
 	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
@@ -37,7 +39,11 @@ export class BackgroundWrapper extends Component<typeof component_arguments> {
 				class={[
 					"background-wrapper",
 					`background-wrapper--${variant}`,
-					{ "background-wrapper--grow-height": grow_to_screen_height },
+					`background-wrapper--padding-${padding ? "yes" : "no"}`,
+					{
+						"background-wrapper--grow-height": grow_to_screen_height,
+						"jdd-no-gap": !margin,
+					},
 					...classes,
 				]}
 			>

src/back/jdd-components/photo/photo.css

@@ -1,4 +1,6 @@
 .image-jdd {
+	display: flex; /* to get rid of added whitespace */
+
 	picture {
 		border-radius: 10px;
 

src/main.css

@@ -80,6 +80,16 @@ body {
 	& > * {
 		grid-column: content;
 	}
+
+	& > .jdd-no-gap {
+		margin-bottom: calc(-1 * var(--row-gap));
+		margin-top: calc(-1 * var(--row-gap));
+
+		&:first-child,
+		& + & {
+			margin-top: 0;
+		}
+	}
 }
 
 .subgrid-layout {