diff --git a/src/core/theme/definition.rs b/src/core/theme/definition.rs
index 8de0f883..ab467fb1 100644
--- a/src/core/theme/definition.rs
+++ b/src/core/theme/definition.rs
@@ -20,16 +20,14 @@ pub trait ThemeTrait: PackageTrait + Send + Sync {
         ]
     }
 
-    fn prepare_region(&self, page: &mut Page, region: &str) -> Markup {
-        let render_region = page.components_in(region).render(page.context());
+    fn prepare_region(&self, page: &mut Page, region_name: &str) -> Markup {
+        let render_region = page.components_in(region_name).render(page.context());
         if render_region.is_empty() {
             html! {}
         } else {
-            let id = OptionId::new(region).get().unwrap();
-            let id_inner = concat_string!(id, "__inner");
             html! {
-                div id=(id) class="pt-region" {
-                    div id=(id_inner) class="pt-region__inner" {
+                div id=[OptionId::new(region_name).get()] class="pt-region" {
+                    div class="pt-region__inner" {
                         (render_region)
                     }
                 }
@@ -55,7 +53,7 @@ pub trait ThemeTrait: PackageTrait + Send + Sync {
                         (self.prepare_region(page, "header"))
                         (self.prepare_region(page, "pagetop"))
                         div class="pt-content" {
-                            div class="pt-content__wrapper" {
+                            div class="pt-content__inner" {
                                 (self.prepare_region(page, "content"))
                                 (self.prepare_region(page, "sidebar"))
                             }
diff --git a/static/base/css/inception.css b/static/base/css/inception.css
index b21da2ea..15a929da 100644
--- a/static/base/css/inception.css
+++ b/static/base/css/inception.css
@@ -74,9 +74,9 @@ a:active {
 
 /* LAYOUT */
 
-#header__inner,
-.pt-content__wrapper,
-#footer__inner {
+#header > .pt-region__inner,
+.pt-content__inner,
+#footer > .pt-region__inner {
 	width: 100%;
 	max-width: var(--pt-max-width);
 	margin: 0 auto;
@@ -85,18 +85,17 @@ a:active {
 #header {
 	background: var(--pt-color--white);
 }
-.pt-content__wrapper {
+.pt-content__inner {
 	background: var(--pt-color--white);
 }
-
 #footer {
 	background: linear-gradient(180deg, var(--pt-color--gray-5) 0%, var(--pt-color--gray-10) 100%);
 }
-#footer__inner {
+#footer > .pt-region__inner {
 	color: var(--pt-color--gray-65);
 	background: var(--pt-color--gray-20);
 	padding: calc(3 * var(--pt-gap)) 0 calc(12 * var(--pt-gap));
 }
-#footer__inner a {
+#footer > .pt-region__inner a {
 	color: var(--pt-color--white);
 }