diff --git a/src/back/html.tsx b/src/back/html.tsx
index 9b13cf3..e48064f 100644
--- a/src/back/html.tsx
+++ b/src/back/html.tsx
@@ -11,6 +11,7 @@ const default_html_options: Partial<HTMLOptions> = {
 	showBottomNavbar: true,
 	loadHamburgerMenu: true,
 	loadSearchModal: true,
+	classes: ["grid-layout-main"],
 };
 
 export default function html({
@@ -40,7 +41,7 @@ export default function html({
 		controllers.push("refresh-on-ts-changes");
 	}
 
-	const classes = (htmlOptions?.bodyClasses || []).join(" ");
+	const classes = (htmlOptions?.bodyClasses || ["grid-layout-main"]).join(" ");
 
 	return tempstreamAsync /* HTML */ ` <!DOCTYPE html>
 		<html
diff --git a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
index 99e266f..9cb8d30 100644
--- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
+++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
@@ -1,13 +1,18 @@
+/* stylelint-disable no-descending-specificity */
 .autoscrolling-images {
-	display: flex;
+	display: grid;
+	grid-template-columns: subgrid;
+	grid-column: screen;
 	justify-content: center;
-	margin: 2rem 0;
 	--gap-between-horizontal-images: 14px;
 }
 
 .autoscrolling-images-wrapper {
 	display: grid;
-	gap: 24px;
+	width: 100%;
+	grid-template-columns: subgrid;
+	grid-column: screen;
+	row-gap: 16px;
 }
 
 .autoscrolling-images__img-wrapper {
@@ -24,7 +29,7 @@
 
 .autoscrolling-images__carousel-container {
 	position: relative;
-	max-width: min(940px, calc(100dvw - 48px));
+	grid-column: main-column;
 
 	picture,
 	img {
@@ -54,26 +59,36 @@
 }
 
 .autoscrolling-images__title-wrapper {
-	max-width: 940px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	text-align: center;
-}
+	display: grid;
+	width: 100%;
+	grid-column: content;
+	grid-template-columns: 1fr 100px;
+	column-gap: 16px;
 
-.autoscrolling-images__title {
-	font-family: var(--font-headings);
-	font-size: 32px;
-	color: var(--color-brand-text-accent);
-	margin: 0;
-}
+	.autoscrolling-images__title {
+		font-family: var(--font-headings);
+		font-size: 32px;
+		color: var(--color-brand-text-accent);
+		margin: 0;
+		text-align: left;
+		flex-basis: 200px;
+	}
 
-.autoscrolling-images__arrow-carousel-container {
-	position: absolute;
-	top: -51px;
-	right: -90px;
-	width: 92px;
-	overflow-x: hidden;
+	.autoscrolling-images__arrow-carousel-container {
+		.autoscrolling-images__arrow-carousel {
+			display: grid;
+			height: 100%;
+			grid-template-rows: 1fr;
+			grid-template-columns: 1fr;
+
+			.autoscrolling-images__arrow-container {
+				display: none; /* to be overwritten in CSS within the generated HTML */
+				grid-row: 1/2;
+				grid-column: 1/2;
+				justify-content: space-between;
+			}
+		}
+	}
 }
 
 .autoscrolling-images__arrow-carousel {
@@ -193,11 +208,6 @@
 		animation-timing-function: linear;
 	}
 
-	.autoscrolling-images__carousel-container {
-		margin: 0;
-		max-width: calc(100cqw - 20px);
-	}
-
 	.autoscrolling-images__carousel-page {
 		display: flex;
 		flex: none !important;
@@ -256,11 +266,6 @@
 			animation-timing-function: linear;
 		}
 
-		.autoscrolling-images__carousel-container {
-			margin: 0;
-			max-width: calc(100cqw - 20px);
-		}
-
 		.autoscrolling-images__carousel-page {
 			display: flex;
 			flex: none !important;
diff --git a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
index 9af8a78..33e24f3 100644
--- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
+++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
@@ -46,7 +46,10 @@ function renderimagePageArrows({
 	imagePages: Array<Array<Record<string, unknown>>>;
 }) {
 	return (
-		<div class="autoscrolling-images__arrow-container">
+		<div
+			class="autoscrolling-images__arrow-container"
+			data-page={pageIndex.toString()}
+		>
 			<label
 				for={`${radioButtonIdPrefix}-autoscrolling-images__radio-${
 					pageIndex == 0 ? imagePages.length - 1 : pageIndex - 1
@@ -159,24 +162,30 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
 			>
 				<style>
 					{imagePages
-						.map(
-							(_, pageIndex) =>
-								`#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__imgs-carousel > .autoscrolling-images__carousel {
+						.map((_, pageIndex) => {
+							const radio_id = `${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}`;
+							return `#${radio_id}:checked ~ .autoscrolling-images__imgs-carousel > .autoscrolling-images__carousel {
 								transform: translateX(calc(${pageIndex} * (-100%)));
 							}
 								
-								#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__arrow-carousel-container
+								#${radio_id}:checked ~ .autoscrolling-images__arrow-carousel-container
 								> .autoscrolling-images__arrow-carousel {
 								transform: translateX(calc(${pageIndex} * (-100%)));
 								
 							}
 
-								#${radioButtonIdPrefix}-autoscrolling-images__radio-${pageIndex}:checked ~ .autoscrolling-images__dots-container
+								#${radio_id}:checked ~ .autoscrolling-images__dots-container
 								> label:nth-child(${pageIndex + 1}) {
 									background-color: var(--color-brand-accent);
 								
-							}`
-						)
+								}
+
+								.autoscrolling-images:has(#${radio_id}:checked)
+								.autoscrolling-images__arrow-container[data-page="${pageIndex}"]{
+								    display:flex;
+								}
+`;
+						})
 						.join("\n")}
 				</style>
 
@@ -186,6 +195,21 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
 				>
 					<div class="autoscrolling-images__title-wrapper">
 						<h2 class="autoscrolling-images__title">{title}</h2>
+						{imagePages.length > 1 ? (
+							<div class="autoscrolling-images__arrow-carousel-container">
+								<div class="autoscrolling-images__arrow-carousel">
+									{imagePages.map((_, pageIndex) =>
+										renderimagePageArrows({
+											pageIndex,
+											imagePages,
+											radioButtonIdPrefix,
+										})
+									)}
+								</div>
+							</div>
+						) : (
+							""
+						)}
 					</div>
 
 					<div class="autoscrolling-images__carousel-container">
@@ -202,21 +226,6 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
 							/>
 						))}
 
-						{imagePages.length > 1 ? (
-							<div class="autoscrolling-images__arrow-carousel-container">
-								<div class="autoscrolling-images__arrow-carousel">
-									{imagePages.map((_, pageIndex) =>
-										renderimagePageArrows({
-											pageIndex,
-											imagePages,
-											radioButtonIdPrefix,
-										})
-									)}
-								</div>
-							</div>
-						) : (
-							""
-						)}
 						<div class="autoscrolling-images__imgs-carousel">
 							<div
 								class="autoscrolling-images__carousel"
diff --git a/src/back/jdd-components/code-snippet/code-snippet.css b/src/back/jdd-components/code-snippet/code-snippet.css
index e1e0628..eedecce 100644
--- a/src/back/jdd-components/code-snippet/code-snippet.css
+++ b/src/back/jdd-components/code-snippet/code-snippet.css
@@ -1,22 +1,25 @@
 .code-snippet {
-    display: flex;
-    flex-direction: column;
-    padding: 0 16px 16px 16px;
+	display: flex;
+	flex-direction: column;
+
+	h2 {
+		margin-top: 0;
+	}
 }
 
 .code-snippet pre {
-    margin: 0;
+	margin: 0;
 }
 
 .code-snippet__language-error {
-    color: red;
-    font-size: 16px;
+	color: red;
+	font-size: 16px;
 }
 
 .code-snippet__language {
-    display: flex;
-    justify-content: flex-start;
-    margin: 0;
-    margin-top: 20px;
-    gap: 8px;
-}
\ No newline at end of file
+	display: flex;
+	justify-content: flex-start;
+	margin: 0;
+	margin-top: 20px;
+	gap: 8px;
+}
diff --git a/src/back/jdd-components/dynamic-grid/dynamic-grid.css b/src/back/jdd-components/dynamic-grid/dynamic-grid.css
index 5451b33..b9f6c80 100644
--- a/src/back/jdd-components/dynamic-grid/dynamic-grid.css
+++ b/src/back/jdd-components/dynamic-grid/dynamic-grid.css
@@ -1,6 +1,7 @@
 .dynamic-grid-component {
 	.dynamic-grid-title {
 		text-align: center;
+		margin-top: 0;
 	}
 
 	.tabs-menu {
diff --git a/src/back/jdd-components/header-with-image/header-with-image.css b/src/back/jdd-components/header-with-image/header-with-image.css
index 14ca600..6bab12b 100644
--- a/src/back/jdd-components/header-with-image/header-with-image.css
+++ b/src/back/jdd-components/header-with-image/header-with-image.css
@@ -1,6 +1,11 @@
 .header-with-image {
-	display: flex;
 	justify-content: center;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: auto auto auto;
+	align-items: center;
+	gap: 10px;
+	grid-column: content;
 
 	color: var(--color-brand-text-accent-04);
 
@@ -9,16 +14,7 @@
 		margin: 0;
 	}
 
-	.container {
-		max-width: 1210px;
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		grid-template-rows: auto auto auto;
-		align-items: center;
-		gap: 10px;
-	}
-
-	.container > * {
+	& > * {
 		grid-column: 2/2;
 	}
 
@@ -29,7 +25,7 @@
 
 		picture {
 			max-width: 100cqw;
-			width: 100%;
+			width: 100% !important;
 			border-radius: 10px;
 
 			img {
@@ -38,11 +34,7 @@
 		}
 	}
 
-	.container > div {
-		padding: 0 0 0px 24px;
-	}
-
-	.container > .img-container {
+	& > .img-container {
 		padding: 0;
 	}
 
@@ -92,10 +84,8 @@
 
 @container (width < 1024px) {
 	.header-with-image {
-		.container {
-			grid-template-columns: 1fr;
-			gap: 0;
-		}
+		grid-template-columns: 1fr;
+		gap: 0;
 
 		.img-container {
 			grid-column: 1/1;
@@ -104,13 +94,12 @@
 			margin-top: 16px;
 		}
 
-		.container > div {
+		& > div {
 			grid-column: 1/1;
-			padding: 0 16px;
 			max-width: 650px;
 		}
 
-		.container > .img-container {
+		& > .img-container {
 			padding: 0 16px;
 		}
 
diff --git a/src/back/jdd-components/header-with-image/header-with-image.jdd.tsx b/src/back/jdd-components/header-with-image/header-with-image.jdd.tsx
index 8c8916b..5986d25 100644
--- a/src/back/jdd-components/header-with-image/header-with-image.jdd.tsx
+++ b/src/back/jdd-components/header-with-image/header-with-image.jdd.tsx
@@ -24,32 +24,31 @@ export class HeaderWithImage extends Component<typeof component_arguments> {
 	toHTML({
 		args: { title, content, image_with_alt, button },
 		jdd_context: { render_markdown, render_image, language },
+		classes,
 	}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
 		const buttonText = button.text.toUpperCase();
 		const titleUpperCase = title.toUpperCase();
 
 		return (
-			<div class="header-with-image">
-				<div class="container">
-					<div class="img-container">
-						{render_image(image_with_alt.image, {
-							container: { width: 600, height: 450, objectFit: "contain" },
-							alt: image_with_alt.alt,
-							// crop: { width: 600, height: 450 },
-						})}
-					</div>
-					<div class="title-wrapper">
-						<h2 class="title">{titleUpperCase}</h2>
-					</div>
-					<div class="content">{render_markdown(language, content)}</div>
-					{button.text === "" ? null : (
-						<div class="button-container">
-							<a class="button" href={button.link}>
-								{buttonText}
-							</a>
-						</div>
-					)}
+			<div class={["header-with-image", ...classes]}>
+				<div class="img-container">
+					{render_image(image_with_alt.image, {
+						container: { width: 600, height: 450, objectFit: "contain" },
+						alt: image_with_alt.alt,
+						// crop: { width: 600, height: 450 },
+					})}
 				</div>
+				<div class="title-wrapper">
+					<h2 class="title">{titleUpperCase}</h2>
+				</div>
+				<div class="content">{render_markdown(language, content)}</div>
+				{button.text === "" ? null : (
+					<div class="button-container">
+						<a class="button" href={button.link}>
+							{buttonText}
+						</a>
+					</div>
+				)}
 			</div>
 		);
 	}
diff --git a/src/back/jdd-components/hero/hero.css b/src/back/jdd-components/hero/hero.css
index f3b37fc..37a1082 100644
--- a/src/back/jdd-components/hero/hero.css
+++ b/src/back/jdd-components/hero/hero.css
@@ -1,5 +1,4 @@
 .hero {
-	padding: 16px;
 	text-align: center;
 
 	h1 {
diff --git a/src/back/jdd-components/hero/hero.jdd.tsx b/src/back/jdd-components/hero/hero.jdd.tsx
index f86fb3a..a0e9548 100644
--- a/src/back/jdd-components/hero/hero.jdd.tsx
+++ b/src/back/jdd-components/hero/hero.jdd.tsx
@@ -4,7 +4,7 @@ import type {
 	ExtractStructuredComponentArgumentsParsed,
 	JDDContext,
 } from "@sealcode/jdd";
-import { Component, ComponentArguments } from "@sealcode/jdd";
+import { Component, ComponentArguments, insert_nbsp } from "@sealcode/jdd";
 import { button, button_variants } from "src/back/elements/button.js";
 
 const component_arguments = {
@@ -48,8 +48,10 @@ export class Hero extends Component<typeof component_arguments> {
 		classes.push(`hero--color-${color}`);
 		return (
 			<div class={["hero", ...classes]}>
-				<h1 class={[`hero__title--color-${title_color}`]}>{title}</h1>
-				<span class={["hero__subtitle"]}>{subtitle}</span>
+				<h1 class={[`hero__title--color-${title_color}`]}>
+					{insert_nbsp(title)}
+				</h1>
+				<span class={["hero__subtitle"]}>{insert_nbsp(subtitle)}</span>
 				<div class={["hero__content"]}>{render_markdown(language, content)}</div>
 				<div class={["hero__buttons"]}>
 					{buttons.map((button_data) => button(button_data))}
diff --git a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.css b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.css
index 3e1e7ea..8fd5914 100644
--- a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.css
+++ b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.css
@@ -2,6 +2,10 @@
 	--max-image-width: 600px;
 	background-color: var(--color-brand-text-bg);
 
+	&[data-bleed="true"] {
+		grid-column: bleed;
+	}
+
 	.horizontal-gallery__top-bar {
 		display: flex;
 		gap: 16px;
diff --git a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx
index ae1969c..e66c3d9 100644
--- a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx
+++ b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx
@@ -21,6 +21,7 @@ const component_arguments = {
 			caption: new ComponentArguments.ShortText().setExampleValues([""]),
 		})
 	),
+	bleed: new ComponentArguments.Boolean(),
 } as const;
 
 export class HorizontalGallery extends Component<typeof component_arguments> {
@@ -36,7 +37,7 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
 	}
 
 	toHTML({
-		args: { title, images, heading_level, heading_align },
+		args: { title, images, heading_level, heading_align, bleed },
 		classes,
 		jdd_context: { render_image },
 		index,
@@ -44,6 +45,7 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
 		return (
 			<div
 				class={["horizontal-gallery", ...classes]}
+				data-bleed={bleed ? "true" : "false"}
 				style={`--jdd-index: ${index}`}
 				data-controller="glightbox"
 			>
diff --git a/src/back/jdd-components/ordered-blocks/ordered-blocks.css b/src/back/jdd-components/ordered-blocks/ordered-blocks.css
index 6e82ad3..8601cf6 100644
--- a/src/back/jdd-components/ordered-blocks/ordered-blocks.css
+++ b/src/back/jdd-components/ordered-blocks/ordered-blocks.css
@@ -1,184 +1,184 @@
 .ordered-blocks {
-  padding-bottom: 96px;
-  position: relative;
+	padding-bottom: 96px;
+	position: relative;
 }
 
 .ordered-blocks ol {
-  list-style-type: none;
-  padding: 0;
+	list-style-type: none;
+	padding: 0;
 }
 
 .ordered-blocks__body {
-  margin: 0 auto;
-  position: relative;
-  z-index: 2;
+	margin: 0 auto;
+	position: relative;
+	z-index: 2;
 }
 
 .ordered-blocks__article-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(36ch, 1fr));
-  padding: 0 24px;
+	margin: 0;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(36ch, 1fr));
+	padding: 0 24px;
 }
 
 .ordered-blocks__buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 24px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 24px;
 }
 
 .ordered-blocks__button-wrapper {
-  text-align: center;
+	text-align: center;
 }
 
 @container (max-width: 400px) {
-  .ordered-blocks__article-list {
-    display: block;
-    max-width: 100%;
-    padding: 0;
-    margin: auto;
-  }
-
+	.ordered-blocks__article-list {
+		display: block;
+		max-width: 100%;
+		padding: 0;
+		margin: auto;
+	}
 }
 
 .ordered-blocks .article-list-item {
-  background-color: var(--main);
-  padding: 0 24px;
-  padding-top: 24px;
+	background-color: var(--main);
+	padding: 0 24px;
+	padding-top: 24px;
 }
 
 .ordered-blocks .article-list-item__number {
-  display: block;
-  font-family: var(--font-sans-serif);
-  font-feature-settings: "tnum";
-  font-weight: 800;
-  font-size: 24px;
-  line-height: 24px;
-  padding-bottom: calc(12px - 1px);
-  border-bottom: 1px solid #000000;
-  margin-bottom: 12px;
+	display: block;
+	font-family: var(--font-sans-serif);
+	font-feature-settings: "tnum";
+	font-weight: 800;
+	font-size: 24px;
+	line-height: 24px;
+	padding-bottom: calc(12px - 1px);
+	border-bottom: 1px solid #000000;
+	margin-bottom: 12px;
 }
 
 .ordered-blocks .article-list-item__image {
-  padding-bottom: calc(24px - 1px);
-  border-bottom: 1px solid #000000;
-  margin-bottom: 12px;
+	padding-bottom: calc(24px - 1px);
+	border-bottom: 1px solid #000000;
+	margin-bottom: 12px;
 }
 
 .ordered-blocks .article-list-item__image img {
-  height: 60px;
+	height: 60px;
 }
 
 .ordered-blocks .article-list-item--above .article-list-item__image {
-  border: none;
-  padding: 0;
-  margin: 0;
+	border: none;
+	padding: 0;
+	margin: 0;
 }
 
 .ordered-blocks .article-list-item h3 {
-  font-size: 20px;
-  line-height: 24px;
-  font-family: var(--font-slab-serif);
-  font-weight: 400;
+	font-size: 20px;
+	line-height: 24px;
+	font-family: var(--font-slab-serif);
+	font-weight: 400;
 }
 
 .ordered-blocks .article-list-item p {
-  font-family: var(--font-sans-serif);
-  font-size: 15px;
-  padding-top: 24px;
+	font-family: var(--font-sans-serif);
+	font-size: 15px;
+	padding-top: 24px;
 }
 
 .ordered-blocks .article-list-item--above .header {
-  display: flex;
-  flex-flow: row;
-  padding-bottom: calc(9.6px - 1px);
-  border-bottom: 1px solid #000000;
-  margin-bottom: 12px;
-  align-items: center;
+	display: flex;
+	flex-flow: row;
+	padding-bottom: calc(9.6px - 1px);
+	border-bottom: 1px solid #000000;
+	margin-bottom: 12px;
+	align-items: center;
 }
 
 .ordered-blocks .article-list-item--purple .article-list-item__image {
-  border-color: hsl(287.3, 13.1%, 50.8%);
+	border-color: hsl(287.3, 13.1%, 50.8%);
 }
 
 .ordered-blocks .article-list-item--above .article-list-item__number {
-  padding-bottom: 0;
-  border-bottom: none;
-  margin-bottom: 0;
+	padding-bottom: 0;
+	border-bottom: none;
+	margin-bottom: 0;
 }
 
 .ordered-blocks .article-list-item--above p {
-  padding-top: 0;
+	padding-top: 0;
 }
 
 @media (max-width: 460px) {
-  .ordered-blocks .article-list-item--above .article-list-item__number {
-    display: block;
-    padding-left: 0;
-    border-bottom: 1px solid #000000;
-    padding-bottom: calc(12px - 1px);
-    margin-bottom: 12px;
-  }
+	.ordered-blocks .article-list-item--above .article-list-item__number {
+		display: block;
+		padding-left: 0;
+		border-bottom: 1px solid #000000;
+		padding-bottom: calc(12px - 1px);
+		margin-bottom: 12px;
+	}
 
-  .ordered-blocks .article-list-item--above .header {
-    display: block;
-    border: none;
-  }
+	.ordered-blocks .article-list-item--above .header {
+		display: block;
+		border: none;
+	}
 
-  .ordered-blocks .article-list-item--above .header h3 {
-    margin-left: 0;
-    padding-top: 0;
-  }
+	.ordered-blocks .article-list-item--above .header h3 {
+		margin-left: 0;
+		padding-top: 0;
+	}
 }
 
 .ordered-blocks .article-list-item--purple .header {
-  border-color: hsl(287.3, 13.1%, 50.8%);
+	border-color: hsl(287.3, 13.1%, 50.8%);
 }
 
 .ordered-blocks .article-list-item--purple .article-list-item__number {
-  color: var(--main-bg-text);
-  border-color: hsl(287.3, 13.1%, 50.8%);
+	color: var(--main-bg-text);
+	border-color: hsl(287.3, 13.1%, 50.8%);
 }
 
 .ordered-blocks .article-list-item--purple h3 {
-  color: var(--main-bg-text);
+	color: var(--main-bg-text);
 }
 
 .ordered-blocks .article-list-item--purple p {
-  color: hsl(286.4, 15.5%, 83.2%);
+	color: hsl(286.4, 15.5%, 83.2%);
 }
 
 .ordered-blocks .article-list-item--wild-sand {
-  background: none;
+	background: none;
 }
 
 .ordered-blocks .article-list-item--wild-sand .header {
-  border-color: var(--alto-gray);
+	border-color: var(--alto-gray);
 }
 
 .ordered-blocks .article-list-item--wild-sand .article-list-item__number {
-  color: var(--secondary-dark-01);
-  border-color: var(--alto-gray);
+	color: var(--secondary-dark-01);
+	border-color: var(--alto-gray);
 }
 
 .ordered-blocks .article-list-item--wild-sand .article-list-item__image {
-  border-color: var(--alto-gray);
+	border-color: var(--alto-gray);
 }
 
 .ordered-blocks .article-list-item--wild-sand h3 {
-  color: var(--wild-sand-bg-text);
+	color: var(--wild-sand-bg-text);
 }
 
 .ordered-blocks .article-list-item--above .header h3 {
-  padding-top: 2.4px;
-  margin-left: 12px;
+	padding-top: 2.4px;
+	margin-left: 12px;
 }
 
 .ordered-blocks .article-list-item--wild-sand p {
-  color: var(--dove-gray);
+	color: var(--dove-gray);
 }
 
 .ordered-blocks .article-list-item .button {
-  margin: 6px auto;
-  display: block;
-}
\ No newline at end of file
+	margin: 6px auto;
+	display: block;
+}
diff --git a/src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.css b/src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.css
index c524aca..944e2a6 100644
--- a/src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.css
+++ b/src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.css
@@ -5,8 +5,8 @@
 	grid-column-gap: 2rem;
 	grid-auto-rows: minmax(7rem, auto);
 	grid-row-gap: 1rem;
-	margin: 1rem auto;
-	padding: 0 1rem;
+	margin: 0 auto;
+	padding: 0;
 }
 
 .pictogram-tiles__tile {
@@ -140,21 +140,22 @@
 
 @container (max-width: 880px) {
 	.pictogram-tiles {
-		display: block;
-		grid-template-columns: auto;
-	}
+		display: flex;
+		flex-flow: column;
+		row-gap: var(--row-gap);
 
-	.pictogram-tiles__tile {
-		max-width: 21rem;
-		margin: 0 auto;
-	}
+		.pictogram-tiles__tile {
+			max-width: 21rem;
+			margin: 0 auto;
+		}
 
-	.pictogram-tiles__tile:nth-child(odd) {
-		grid-column: auto;
-	}
+		.pictogram-tiles__tile:nth-child(odd) {
+			grid-column: auto;
+		}
 
-	.pictogram-tiles__tile:nth-child(even) {
-		grid-column: auto;
+		.pictogram-tiles__tile:nth-child(even) {
+			grid-column: auto;
+		}
 	}
 }
 
diff --git a/src/back/jdd-components/split-view/split-view.css b/src/back/jdd-components/split-view/split-view.css
index d3a8c79..59cf8cc 100644
--- a/src/back/jdd-components/split-view/split-view.css
+++ b/src/back/jdd-components/split-view/split-view.css
@@ -1,14 +1,14 @@
 .split-view {
 	width: 100%;
+	border: 1px solid red;
 
-	.split-view__wrapper {
+	display: grid;
+	grid-template-columns: subgrid;
+
+	@container (max-width: 640px) {
 		display: flex;
-		flex-flow: row nowrap;
-		gap: 24px;
-
-		@container (max-width: 640px) {
-			flex-flow: column;
-		}
+		flex-flow: column;
+		gap: var(--row-gap);
 	}
 
 	.split-view__half {
@@ -19,5 +19,9 @@
 		flex-flow: row;
 		align-items: center;
 		justify-content: center;
+
+		&:nth-child(2) {
+			grid-column: right-half;
+		}
 	}
 }
diff --git a/src/back/jdd-components/split-view/split-view.jdd.tsx b/src/back/jdd-components/split-view/split-view.jdd.tsx
index 8579d73..cd6dabf 100644
--- a/src/back/jdd-components/split-view/split-view.jdd.tsx
+++ b/src/back/jdd-components/split-view/split-view.jdd.tsx
@@ -40,19 +40,17 @@ export class SplitView extends Component<typeof component_arguments> {
 	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
 		return (
 			<div class={["split-view", ...classes]}>
-				<div class="split-view__wrapper">
-					<div class="split-view__half">
-						{ComponentArguments.NestedComponent.render({
-							jdd_context,
-							data: component1 as Record<string, unknown>,
-						})}
-					</div>
-					<div class="split-view__half">
-						{ComponentArguments.NestedComponent.render({
-							jdd_context,
-							data: component2 as Record<string, unknown>,
-						})}
-					</div>
+				<div class="split-view__half">
+					{ComponentArguments.NestedComponent.render({
+						jdd_context,
+						data: component1 as Record<string, unknown>,
+					})}
+				</div>
+				<div class="split-view__half">
+					{ComponentArguments.NestedComponent.render({
+						jdd_context,
+						data: component2 as Record<string, unknown>,
+					})}
 				</div>
 			</div>
 		);
diff --git a/src/back/jdd-components/tekst/tekst.css b/src/back/jdd-components/tekst/tekst.css
index 634aca9..49f8b83 100644
--- a/src/back/jdd-components/tekst/tekst.css
+++ b/src/back/jdd-components/tekst/tekst.css
@@ -3,6 +3,15 @@
 	font-size: 16px;
 	line-height: 24px;
 
+	p {
+		margin: 0;
+		text-align: justify;
+	}
+
+	p + p {
+		margin-top: 16px;
+	}
+
 	&.tekst--color-transparent {
 		background-color: transparent;
 		color: var(--color-brand-text-fg);
@@ -31,8 +40,4 @@
 			hyphens: auto;
 		}
 	}
-
-	p {
-		text-align: justify;
-	}
 }
diff --git a/src/back/jdd-components/video/video.css b/src/back/jdd-components/video/video.css
index c32558a..18f5f8e 100644
--- a/src/back/jdd-components/video/video.css
+++ b/src/back/jdd-components/video/video.css
@@ -2,4 +2,8 @@
 	display: flex;
 	flex-flow: column;
 	align-items: center;
+
+	video {
+		max-width: 100cqw;
+	}
 }
diff --git a/src/back/jdd-components/video/video.jdd.tsx b/src/back/jdd-components/video/video.jdd.tsx
index 4fd8c1a..7e97b3e 100644
--- a/src/back/jdd-components/video/video.jdd.tsx
+++ b/src/back/jdd-components/video/video.jdd.tsx
@@ -23,7 +23,10 @@ export class Video extends Component<typeof component_arguments> {
 				{file instanceof PathFilePointer ? (
 					<video
 						controls
-						style={`max-width: ${max_width}px; max-height: ${max_height}px`}
+						style={[
+							`${max_width ? `max-width: min(${max_width}px, 100cqw);` : ""}`,
+							`${max_height ? `max-height: min(${max_height}px, 80cqh);` : ""}`,
+						].join("; ")}
 					>
 						<source src={file.getURL()} type={file.mimetype} />
 						Your browser does not support video —{" "}
diff --git a/src/back/routes/middlewares/customUrlView.tsx b/src/back/routes/middlewares/customUrlView.tsx
index eb8b057..eb781ef 100644
--- a/src/back/routes/middlewares/customUrlView.tsx
+++ b/src/back/routes/middlewares/customUrlView.tsx
@@ -62,9 +62,9 @@ export const customUrlView =
 						showFooter: !hideNavigation,
 					},
 					body: (
-						<main class="custom-page jdd-outer-container">
+						<main class="custom-page">
 							{heading?.trim() ? <h1>{heading}</h1> : ""}
-							<div class="jdd-container">{jdd.render()}</div>
+							{jdd.render()}
 						</main>
 					),
 					makeHead: (...args) =>
diff --git a/src/front/controllers.ts b/src/front/controllers.ts
index 86761ca..99310ed 100644
--- a/src/front/controllers.ts
+++ b/src/front/controllers.ts
@@ -40,9 +40,6 @@ application.register("jdd-table-paste", JddTablePaste);
 import { default as JsonEditor } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/json-editor.stimulus.js";
 application.register("json-editor", JsonEditor);
 
-import { default as MarkdownTextarea } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/markdown-textarea.stimulus.js";
-application.register("markdown-textarea", MarkdownTextarea);
-
 import { default as RefreshOnTsChanges } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/refresh-on-ts-changes.stimulus.js";
 application.register("refresh-on-ts-changes", RefreshOnTsChanges);
 
diff --git a/src/main.css b/src/main.css
index 93ae47f..9e76996 100644
--- a/src/main.css
+++ b/src/main.css
@@ -8,12 +8,82 @@ html {
 	font-size: 14px;
 }
 
-body {
-	max-width: 1024px;
-	margin: 1rem auto;
+.grid-layout-main {
+	display: grid;
+	container-type: inline-size;
+	row-gap: var(--row-gap);
+	grid-template-columns:
+		[screen-start] var(--screen-padding)
+		[totalbleed-start] 1fr [bleed-start] var(--bleed-outer-width)
+		[main-column-start] var(--column-padding)
+		[content-start left-half-start] var(--half-width)
+		[left-half-end] var(--margin-between-halves) [right-half-start] var(--half-width)
+		[content-end right-half-end] var(--column-padding)
+		[main-column-end] var(--bleed-outer-width)
+		[bleed-end] 1fr [totalbleed-end] var(--screen-padding)
+		[screen-end];
+	margin: 0;
+	padding: 0;
+	--total-available-space: 100cqw;
+	--row-gap: 16px;
+	--column-padding: 16px;
+	--target-column-width: 800px;
+	--screen-padding: 16px;
+	--margin-between-halves: 8px;
+	--total-horizontal-spacing: 2 * var(--screen-padding) - 2 * var(--column-padding) -
+		var(--margin-between-halves);
+	--half-width: min(
+		calc((var(--total-available-space) - var(--total-horizontal-spacing)) / 2),
+		calc(
+			(
+					var(--target-column-width) - var(--margin-between-halves) -
+						var(--column-padding) * 2
+				) /
+				2
+		)
+	);
+	--bleed-outer-width: min(
+		150px,
+		max(
+			0px,
+			calc(
+				(
+						var(--total-available-space) - var(--target-column-width) -
+							var(--total-horizontal-spacing)
+					) /
+					2
+			)
+		)
+	);
 	background: var(--color-brand-text-bg);
 	color: var(--color-brand-text-fg);
-	padding: 1rem 0;
+
+	@container (max-width: 800px) {
+		--screen-padding: 8px;
+	}
+
+	@container (max-width: 600px) {
+		--screen-padding: 0px;
+	}
+
+	@container (max-width: 400px) {
+		--column-padding: 8px;
+	}
+
+	& > * {
+		grid-column: content;
+	}
+}
+
+.subgrid-layout {
+	display: grid;
+	grid-template-columns: subgrid;
+	grid-column: screen-start / screen-end;
+	row-gap: var(--row-gap);
+
+	& > * {
+		grid-column: main-column-content-start / main-column-content-end;
+	}
 }
 
 .delete-button {
