Consistent padding

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

@@ -2,12 +2,10 @@
 	font-family: var(--font-long-text);
 	font-size: 16px;
 	line-height: 24px;
-	padding: 16px;
 
 	&.tekst--color-transparent {
 		background-color: transparent;
 		color: var(--color-brand-text-fg);
-		padding: 0;
 	}
 
 	&.tekst--color-normal {

src/back/jdd-components/tekst/tekst.jdd.tsx

@@ -8,7 +8,12 @@ import type {
 import { Component, ComponentArguments } from "@sealcode/jdd";
 
 const component_arguments = {
-	color: new ComponentArguments.Enum(["transparent", "normal", "accent", "accent2"]),
+	color: new ComponentArguments.Enum([
+		"transparent",
+		"normal",
+		"accent",
+		"accent2",
+	]).setExampleValues(["normal"]),
 	content: new ComponentArguments.Markdown(),
 } as const;
 

src/main.css

@@ -53,10 +53,6 @@ a {
 	gap: 16px;
 }
 
-.jdd-outer-container {
-	container-type: inline-size;
-}
-
 h1,
 h2,
 h3,
@@ -98,3 +94,58 @@ h4 {
 		font-size: 1.05em;
 	}
 }
+
+.jdd-outer-container {
+	/* for things that contain a jdd-container somewhere inside */
+	container-type: inline-size;
+
+	display: grid !important;
+	--min-content-width: 320px;
+	--main-column-max-width: 1224px;
+	grid-template-columns:
+		[screen-left-edge] minmax(16px, 1fr) [content-left-edge left-column-start] minmax(
+			120px,
+			600px
+		)
+		[left-column-end] 24px [right-column-start] minmax(120px, 600px)
+		[content-right-edge right-column-end] minmax(16px, 1fr) [screen-right-edge];
+
+	@container (max-width: 550px) {
+		grid-template-columns:
+			[screen-left-edge] 16px
+			[content-left-edge left-column-start] 1fr
+			[content-right-edge right-column-end] 16px [screen-right-edge];
+	}
+	max-width: none !important;
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+	margin-left: 0 !important;
+	margin-right: 0 !important ;
+
+	& > * {
+		grid-column: content-left-edge/content-right-edge;
+	}
+
+	.jdd-container {
+		display: grid;
+		grid-template-columns: subgrid;
+		grid-auto-rows: min-content;
+		grid-column: screen-left-edge/screen-right-edge;
+		background-color: var(--color-brand-text-bg);
+
+		& > * {
+			order: var(--jdd-index);
+			grid-column: content-left-edge/content-right-edge;
+			container-type: inline-size;
+			width: 100%;
+
+			&.pricelist-container + &.pricelist-container {
+				margin-top: 24px !important;
+			}
+		}
+
+		& > .bleed-out {
+			grid-column: screen-left-edge/screen-right-edge;
+		}
+	}
+}