diff --git a/helpers/pagetop-macros/src/lib.rs b/helpers/pagetop-macros/src/lib.rs
index 23889b9a..cf525fa7 100644
--- a/helpers/pagetop-macros/src/lib.rs
+++ b/helpers/pagetop-macros/src/lib.rs
@@ -58,9 +58,9 @@ pub fn fn_builder(_: TokenStream, item: TokenStream) -> TokenStream {
     #[rustfmt::skip]
     let fn_alter_doc = concat_string!(
         "<p id=\"method.", fn_with_name, "\">",
-        "Use <code class=\"code-header\"> <a class=\"fn\" href=\"#method.", fn_with_name, "\">",
+        "Use <code class=\"code-header\"> <span class=\"fn\" href=\"#method.", fn_with_name, "\">",
         fn_with_name,
-        "</a>(self, …) -> Self </code> to apply the <a href=\"#method.new\">builder pattern</a>.",
+        "</span>(self, …) -> Self </code> to apply the <a href=\"#method.new\">builder pattern</a>.",
         "</p>"
     );
 
@@ -130,8 +130,18 @@ pub fn derive_component_classes(input: TokenStream) -> TokenStream {
     let input = parse_macro_input!(input as DeriveInput);
     let name = &input.ident;
 
+    let fn_alter_doc = concat_string!(
+        "<p id=\"method.with_classes\">",
+        "Use <code class=\"code-header\">",
+        " <span class=\"fn\" href=\"#method.with_classes\">with_classes</span>(self, …) -> Self ",
+        "</code> to apply the <a href=\"#method.new\">builder pattern</a>.",
+        "</p>"
+    );
+
     let expanded = quote! {
-        impl ImplementClasses for #name {
+        impl ComponentClasses for #name {
+            #[inline]
+            #[doc = #fn_alter_doc]
             fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
                 self.classes.alter_value(op, classes);
                 self
diff --git a/src/base/component/flex/item.rs b/src/base/component/flex/item.rs
index 583045b7..2b2c0bae 100644
--- a/src/base/component/flex/item.rs
+++ b/src/base/component/flex/item.rs
@@ -7,7 +7,6 @@ pub struct Item {
     weight       : Weight,
     renderable   : Renderable,
     classes      : OptionClasses,
-    inner_classes: OptionClasses,
     item_grow    : flex::ItemGrow,
     item_shrink  : flex::ItemShrink,
     item_size    : flex::ItemSize,
@@ -45,8 +44,6 @@ impl ComponentTrait for Item {
             ]
             .join(" "),
         );
-        self.inner_classes
-            .alter_value(ClassesOp::Prepend, "pt-flex__item-inner");
     }
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
@@ -56,7 +53,7 @@ impl ComponentTrait for Item {
         };
         PrepareMarkup::With(html! {
             div id=[self.id()] class=[self.classes().get()] style=[order] {
-                div class=[self.inner_classes().get()] {
+                div class="inner" {
                     (self.components().render(cx))
                 }
             }
@@ -85,12 +82,6 @@ impl Item {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_inner_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.inner_classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_grow(&mut self, grow: flex::ItemGrow) -> &mut Self {
         self.item_grow = grow;
@@ -135,10 +126,6 @@ impl Item {
 
     // Item GETTERS.
 
-    pub fn inner_classes(&self) -> &OptionClasses {
-        &self.inner_classes
-    }
-
     pub fn grow(&self) -> &flex::ItemGrow {
         &self.item_grow
     }
diff --git a/src/base/component/wrapper.rs b/src/base/component/wrapper.rs
index fe6ab13c..3e39f782 100644
--- a/src/base/component/wrapper.rs
+++ b/src/base/component/wrapper.rs
@@ -17,16 +17,13 @@ pub struct Wrapper {
     weight       : Weight,
     renderable   : Renderable,
     classes      : OptionClasses,
-    inner_classes: OptionClasses,
     wrapper_type : WrapperType,
     stuff        : AnyComponents,
 }
 
 impl ComponentTrait for Wrapper {
     fn new() -> Self {
-        Wrapper::default()
-            .with_classes(ClassesOp::Add, "container")
-            .with_inner_classes(ClassesOp::Add, "container")
+        Wrapper::default().with_classes(ClassesOp::Add, "pt-wrapper")
     }
 
     fn id(&self) -> Option<String> {
@@ -43,37 +40,39 @@ impl ComponentTrait for Wrapper {
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
         match self.wrapper_type() {
-            WrapperType::Header => PrepareMarkup::With(html! {
-                header id=[self.id()] class=[self.classes().get()] {
-                    div class=[self.inner_classes().get()] {
-                        (self.components().render(cx))
-                    }
-                }
-            }),
-            WrapperType::Footer => PrepareMarkup::With(html! {
-                footer id=[self.id()] class=[self.classes().get()] {
-                    div class=[self.inner_classes().get()] {
+            WrapperType::Container => PrepareMarkup::With(html! {
+                div id=[self.id()] class=[self.classes().get()] {
+                    div class="inner" {
                         (self.components().render(cx))
                     }
                 }
             }),
             WrapperType::Main => PrepareMarkup::With(html! {
                 main id=[self.id()] class=[self.classes().get()] {
-                    div class=[self.inner_classes().get()] {
+                    div class="inner" {
                         (self.components().render(cx))
                     }
                 }
             }),
             WrapperType::Section => PrepareMarkup::With(html! {
                 section id=[self.id()] class=[self.classes().get()] {
-                    div class=[self.inner_classes().get()] {
+                    div class="inner" {
                         (self.components().render(cx))
                     }
                 }
             }),
-            _ => PrepareMarkup::With(html! {
-                div id=[self.id()] class=[self.classes().get()] {
-                    (self.components().render(cx))
+            WrapperType::Header => PrepareMarkup::With(html! {
+                header id=[self.id()] class=[self.classes().get()] {
+                    div class="inner" {
+                        (self.components().render(cx))
+                    }
+                }
+            }),
+            WrapperType::Footer => PrepareMarkup::With(html! {
+                footer id=[self.id()] class=[self.classes().get()] {
+                    div class="inner" {
+                        (self.components().render(cx))
+                    }
                 }
             }),
         }
@@ -81,38 +80,30 @@ impl ComponentTrait for Wrapper {
 }
 
 impl Wrapper {
-    pub fn header() -> Self {
-        let mut c = Wrapper::default()
-            .with_classes(ClassesOp::Add, "header")
-            .with_inner_classes(ClassesOp::Add, "container");
-        c.wrapper_type = WrapperType::Header;
-        c
-    }
-
-    pub fn footer() -> Self {
-        let mut c = Wrapper::default()
-            .with_classes(ClassesOp::Add, "footer")
-            .with_inner_classes(ClassesOp::Add, "container");
-        c.wrapper_type = WrapperType::Footer;
-        c
-    }
-
     pub fn main() -> Self {
-        let mut c = Wrapper::default()
-            .with_classes(ClassesOp::Add, "main")
-            .with_inner_classes(ClassesOp::Add, "container");
+        let mut c = Wrapper::default().with_classes(ClassesOp::Add, "pt-main");
         c.wrapper_type = WrapperType::Main;
         c
     }
 
     pub fn section() -> Self {
-        let mut c = Wrapper::default()
-            .with_classes(ClassesOp::Add, "section")
-            .with_inner_classes(ClassesOp::Add, "container");
+        let mut c = Wrapper::default().with_classes(ClassesOp::Add, "pt-section");
         c.wrapper_type = WrapperType::Section;
         c
     }
 
+    pub fn header() -> Self {
+        let mut c = Wrapper::default().with_classes(ClassesOp::Add, "pt-header");
+        c.wrapper_type = WrapperType::Header;
+        c
+    }
+
+    pub fn footer() -> Self {
+        let mut c = Wrapper::default().with_classes(ClassesOp::Add, "pt-footer");
+        c.wrapper_type = WrapperType::Footer;
+        c
+    }
+
     // Wrapper BUILDER.
 
     #[fn_builder]
@@ -133,12 +124,6 @@ impl Wrapper {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_inner_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.inner_classes.alter_value(op, classes);
-        self
-    }
-
     #[rustfmt::skip]
     pub fn add_component(mut self, component: impl ComponentTrait) -> Self {
         self.stuff.alter_value(ArcAnyOp::Add(ArcAnyComponent::new(component)));
@@ -153,10 +138,6 @@ impl Wrapper {
 
     // Wrapper GETTERS.
 
-    pub fn inner_classes(&self) -> &OptionClasses {
-        &self.inner_classes
-    }
-
     pub fn wrapper_type(&self) -> &WrapperType {
         &self.wrapper_type
     }
diff --git a/src/base/package/welcome.rs b/src/base/package/welcome.rs
index d6b6a009..a004da3b 100644
--- a/src/base/package/welcome.rs
+++ b/src/base/package/welcome.rs
@@ -55,7 +55,7 @@ fn hello_world() -> Wrapper {
                 .with_direction(flex::Direction::Column(BreakPoint::MD))
                 .add_item(
                     flex::Item::new()
-                        .with_inner_classes(ClassesOp::Add, "hello-col-text")
+                        .with_classes(ClassesOp::Add, "hello-col-text")
                         .with_size(flex::ItemSize::Percent40)
                         .add_component(
                             Heading::h1(L10n::l("welcome_title")).with_size(HeadingSize::Medium),
@@ -97,7 +97,7 @@ fn hello_world() -> Wrapper {
                 )
                 .add_item(
                     flex::Item::new()
-                        .with_inner_classes(ClassesOp::Add, "hello-col-image")
+                        .with_classes(ClassesOp::Add, "hello-col-image")
                         .with_size(flex::ItemSize::Percent60)
                         .add_component(Image::with("/base/images/header.svg")),
                 ),
@@ -133,13 +133,13 @@ fn about_pagetop() -> Wrapper {
                 .with_direction(flex::Direction::Column(BreakPoint::SM))
                 .add_item(
                     flex::Item::new()
-                        .with_inner_classes(ClassesOp::Add, "pagetop-col-image")
+                        .with_classes(ClassesOp::Add, "pagetop-col-image")
                         .with_size(flex::ItemSize::Percent40)
                         .add_component(Image::with("/base/images/about.svg")),
                 )
                 .add_item(
                     flex::Item::new()
-                        .with_inner_classes(ClassesOp::Add, "pagetop-col-text")
+                        .with_classes(ClassesOp::Add, "pagetop-col-text")
                         .add_component(Heading::h2(L10n::l("welcome_pagetop_title")))
                         .add_component(
                             Paragraph::translated(L10n::l("welcome_pagetop_text1"))
@@ -159,7 +159,7 @@ fn promo_pagetop() -> Wrapper {
                 .with_direction(flex::Direction::Column(BreakPoint::MD))
                 .add_item(
                     flex::Item::new()
-                        .with_inner_classes(ClassesOp::Add, "promo-col-text")
+                        .with_classes(ClassesOp::Add, "promo-col-text")
                         .with_size(flex::ItemSize::Percent50)
                         .add_component(Heading::h2(L10n::l("welcome_promo_title")))
                         .add_component(
@@ -175,7 +175,7 @@ fn promo_pagetop() -> Wrapper {
                 )
                 .add_item(
                     flex::Item::new()
-                        .with_inner_classes(ClassesOp::Add, "promo-col-image")
+                        .with_classes(ClassesOp::Add, "promo-col-image")
                         .with_size(flex::ItemSize::Percent50)
                         .add_component(Image::with("/base/images/pagetop.png")),
                 ),
@@ -190,12 +190,12 @@ fn reporting_issues() -> Wrapper {
                 .with_direction(flex::Direction::Column(BreakPoint::MD))
                 .add_item(
                     flex::Item::new()
-                        .with_inner_classes(ClassesOp::Add, "issues-col-image")
+                        .with_classes(ClassesOp::Add, "issues-col-image")
                         .add_component(Image::with("/base/images/issues.jpg")),
                 )
                 .add_item(
                     flex::Item::new()
-                        .with_inner_classes(ClassesOp::Add, "issues-col-text")
+                        .with_classes(ClassesOp::Add, "issues-col-text")
                         .with_size(flex::ItemSize::Percent50)
                         .add_component(Heading::h2(L10n::l("welcome_issues_title")))
                         .add_component(
diff --git a/src/core/component.rs b/src/core/component.rs
index d0ec8fdc..57be6b3d 100644
--- a/src/core/component.rs
+++ b/src/core/component.rs
@@ -9,7 +9,7 @@ mod definition;
 pub use definition::{component_as_mut, component_as_ref, ComponentBase, ComponentTrait};
 
 mod classes;
-pub use classes::{ImplementClasses, ImplementClassesOp};
+pub use classes::{ComponentClasses, ComponentClassesOp};
 
 mod arc_any;
 pub use arc_any::AnyComponents;
diff --git a/src/core/component/classes.rs b/src/core/component/classes.rs
index b267973b..b5b3be21 100644
--- a/src/core/component/classes.rs
+++ b/src/core/component/classes.rs
@@ -1,6 +1,7 @@
+use crate::core::component::ComponentBase;
 use crate::html::{ClassesOp, OptionClasses};
 
-pub trait ImplementClassesOp {
+pub trait ComponentClassesOp {
     fn with_classes(self, op: ClassesOp, classes: impl Into<String>) -> Self;
 
     fn add_classes(&mut self, classes: impl Into<String>) -> &mut Self;
@@ -16,13 +17,14 @@ pub trait ImplementClassesOp {
     fn set_classes(&mut self, classes: impl Into<String>) -> &mut Self;
 }
 
-pub trait ImplementClasses: ImplementClassesOp {
+pub trait ComponentClasses: ComponentBase + ComponentClassesOp {
     fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self;
 
     fn classes(&self) -> &OptionClasses;
 }
 
-impl<C: ImplementClasses> ImplementClassesOp for C {
+impl<C: ComponentBase + ComponentClasses> ComponentClassesOp for C {
+    #[doc(hidden)]
     fn with_classes(mut self, op: ClassesOp, classes: impl Into<String>) -> Self {
         self.alter_classes(op, classes);
         self
diff --git a/static/base/css/welcome.css b/static/base/css/welcome.css
index 4bca64c3..40644cb7 100644
--- a/static/base/css/welcome.css
+++ b/static/base/css/welcome.css
@@ -16,11 +16,11 @@
 	padding-top: 0;
 }
 
-#welcome [class$="-col-text"] {
+#welcome [class$="-col-text"] > .inner {
 	margin: 5% 5% 0;
 	text-align: center;
 }
-#welcome [class$="-col-image"] {
+#welcome [class$="-col-image"] > .inner {
 	margin: 1rem 5%;
 }
 
@@ -28,7 +28,7 @@
 	text-align: center;
 	margin: 0 5%;
 }
-#welcome .welcome > div.container {
+#welcome .welcome > .inner {
 	padding: 2rem 1rem;
 	border-radius: 28px;
 	background: url("/base/images/welcome.jpg") center center no-repeat;
@@ -36,18 +36,18 @@
 	background-size: cover;
 	color: #fff;
 }
-#welcome .welcome > div.container > h2 {
+#welcome .welcome > .inner > h2 {
 	color: #fff;
 }
-#welcome .welcome > div.container > h3 {
+#welcome .welcome > .inner > h3 {
 	color: #ccc;
 }
 
-#welcome .promo-col-image {
+#welcome .promo-col-image > .inner {
 	padding: 0 5%;
 }
 
-#welcome .issues-col-image img {
+#welcome .issues-col-image > .inner img {
 	border-radius: 40px;
 }
 
@@ -55,20 +55,20 @@
 
 /* MD - Applies >= 768px */
 @media screen and (min-width: 48em) {
-	#welcome .promo-col-image {
+	#welcome .promo-col-image > .inner {
 		padding: 0;
 	}
 
 	#welcome .issues {
 		padding-top: 1.6rem;
 	}
-	#welcome .issues-col-text {
+	#welcome .issues-col-text > .inner {
 		text-align: left;
 	}
 }
 /* LG - Applies >= 992px */
 @media screen and (min-width: 62em) {
-	#welcome .hello-col-text {
+	#welcome .hello-col-text > .inner {
 		margin-top: 2rem;
 		text-align: left;
 	}
@@ -77,19 +77,19 @@
 		padding: 0 15% 2rem;
 	}
 
-	#welcome .promo-col-text {
+	#welcome .promo-col-text > .inner {
 		margin-right: 0;
 		text-align: right;
 	}
 }
 /* XL - Applies >= 1280px */
 @media screen and (min-width: 80em) {
-	#welcome .hello-col-text {
+	#welcome .hello-col-text > .inner {
 		margin-top: 4rem;
 		margin-left: 20%;
 	}
 
-	#welcome .pagetop-col-text {
+	#welcome .pagetop-col-text > .inner {
 		text-align: left;
 	}
 }
\ No newline at end of file