diff --git a/pagetop/src/base/component.rs b/pagetop/src/base/component.rs
index 1b78ac1e..1fda2f16 100644
--- a/pagetop/src/base/component.rs
+++ b/pagetop/src/base/component.rs
@@ -49,32 +49,32 @@ pub(crate) fn add_assets_for_base(cx: &mut Context) {
     ));
 }
 
-// By default, 1 pixel = 0.0625em.
-
 #[rustfmt::skip]
 #[derive(Default)]
 pub enum BreakPoint {
     #[default]
-    None,  /* Does not apply */
-    SM,    /* @media screen and (max-width: 35.5em) - Applies <= 568px  */
-    MD,    /* @media screen and (max-width: 48em)   - Applies <= 768px  */
-    LG,    /* @media screen and (max-width: 62em)   - Applies <= 992px */
-    XL,    /* @media screen and (max-width: 80em)   - Applies <= 1280px */
-    X2L,   /* @media screen and (max-width: 120em)  - Applies <= 1920px */
-    X3L,   /* @media screen and (max-width: 160em)  - Applies <= 2560px */
+    None,  /* Does not apply. Rest initially assume 1 pixel = 0.0625em */
+    SM,    /* PageTop default applies to <= 568px  - @media screen and (max-width: 35.5em) */
+    MD,    /* PageTop default applies to <= 768px  - @media screen and (max-width: 48em)   */
+    LG,    /* PageTop default applies to <= 992px  - @media screen and (max-width: 62em)   */
+    XL,    /* PageTop default applies to <= 1280px - @media screen and (max-width: 80em)   */
+    X2L,   /* PageTop default applies to <= 1440px - @media screen and (max-width: 90em)   */
+    X3L,   /* PageTop default applies to <= 1920px - @media screen and (max-width: 120em)  */
+    X2K,   /* PageTop default applies to <= 2560px - @media screen and (max-width: 160em)  */
 }
 
 #[rustfmt::skip]
 impl ToString for BreakPoint {
     fn to_string(&self) -> String {
         match self {
-            BreakPoint::None => "bp-no".to_string(),
-            BreakPoint::SM   => "bp-sm".to_string(),
-            BreakPoint::MD   => "bp-md".to_string(),
-            BreakPoint::LG   => "bp-lg".to_string(),
-            BreakPoint::XL   => "bp-xl".to_string(),
-            BreakPoint::X2L  => "bp-x2l".to_string(),
-            BreakPoint::X3L  => "bp-x3l".to_string(),
+            BreakPoint::None => "pt-bp__no".to_string(),
+            BreakPoint::SM   => "pt-bp__sm".to_string(),
+            BreakPoint::MD   => "pt-bp__md".to_string(),
+            BreakPoint::LG   => "pt-bp__lg".to_string(),
+            BreakPoint::XL   => "pt-bp__xl".to_string(),
+            BreakPoint::X2L  => "pt-bp__x2l".to_string(),
+            BreakPoint::X3L  => "pt-bp__x3l".to_string(),
+            BreakPoint::X2K  => "pt-bp__x2k".to_string(),
         }
     }
 }
diff --git a/pagetop/static/base/css/flex.css b/pagetop/static/base/css/flex.css
index 0b9d5d48..42b1d27f 100644
--- a/pagetop/static/base/css/flex.css
+++ b/pagetop/static/base/css/flex.css
@@ -10,19 +10,19 @@
 	padding: 0 !important;
 }
 .pt-flex__row,
-.pt-flex__col.bp-no {
+.pt-flex__col.pt-bp__no {
 	flex-direction: column;
 }
 .pt-flex__row.pt-flex__reverse,
-.pt-flex__col.pt-flex__reverse.bp-no {
+.pt-flex__col.pt-flex__reverse.pt-bp__no {
 	flex-direction: column-reverse;
 }
 .pt-flex__col,
-.pt-flex__row.bp-no {
+.pt-flex__row.pt-bp__no {
 	flex-direction: row;
 }
 .pt-flex__col.pt-flex__reverse,
-.pt-flex__row.pt-flex__reverse.bp-no {
+.pt-flex__row.pt-flex__reverse.pt-bp__no {
 	flex-direction: row-reverse;
 }
 
@@ -241,19 +241,19 @@
 
 /* SM - Applies <= 568px */
 @media screen and (max-width: 35.5em) {
-	.pt-flex__row.bp-sm {
+	.pt-flex__row.pt-bp__sm {
 		flex-direction: row;
 	}
-	.pt-flex__row.pt-flex__reverse.bp-sm {
+	.pt-flex__row.pt-flex__reverse.pt-bp__sm {
 		flex-direction: row-reverse;
 	}
-	.pt-flex__col.bp-sm {
+	.pt-flex__col.pt-bp__sm {
 		flex-direction: column;
 	}
-	.pt-flex__col.pt-flex__reverse.bp-sm {
+	.pt-flex__col.pt-flex__reverse.pt-bp__sm {
 		flex-direction: column-reverse;
 	}
-	.pt-flex__col.bp-sm .pt-flex__item {
+	.pt-flex__col.pt-bp__sm .pt-flex__item {
 		flex: 1 1 auto;
 		max-width: 100%;
 		margin-left: 0;
@@ -261,19 +261,19 @@
 }
 /* MD - Applies <= 768px */
 @media screen and (max-width: 48em) {
-	.pt-flex__row.bp-md {
+	.pt-flex__row.pt-bp__md {
 		flex-direction: row;
 	}
-	.pt-flex__row.pt-flex__reverse.bp-md {
+	.pt-flex__row.pt-flex__reverse.pt-bp__md {
 		flex-direction: row-reverse;
 	}
-	.pt-flex__col.bp-md {
+	.pt-flex__col.pt-bp__md {
 		flex-direction: column;
 	}
-	.pt-flex__col.pt-flex__reverse.bp-md {
+	.pt-flex__col.pt-flex__reverse.pt-bp__md {
 		flex-direction: column-reverse;
 	}
-	.pt-flex__col.bp-md .pt-flex__item {
+	.pt-flex__col.pt-bp__md .pt-flex__item {
 		flex: 1 1 auto;
 		max-width: 100%;
 		margin-left: 0;
@@ -281,19 +281,19 @@
 }
 /* LG - Applies <= 992px */
 @media screen and (max-width: 62em) {
-	.pt-flex__row.bp-lg {
+	.pt-flex__row.pt-bp__lg {
 		flex-direction: row;
 	}
-	.pt-flex__row.pt-flex__reverse.bp-lg {
+	.pt-flex__row.pt-flex__reverse.pt-bp__lg {
 		flex-direction: row-reverse;
 	}
-	.pt-flex__col.bp-lg {
+	.pt-flex__col.pt-bp__lg {
 		flex-direction: column;
 	}
-	.pt-flex__col.pt-flex__reverse.bp-lg {
+	.pt-flex__col.pt-flex__reverse.pt-bp__lg {
 		flex-direction: column-reverse;
 	}
-	.pt-flex__col.bp-lg .pt-flex__item {
+	.pt-flex__col.pt-bp__lg .pt-flex__item {
 		flex: 1 1 auto;
 		max-width: 100%;
 		margin-left: 0;
@@ -301,59 +301,79 @@
 }
 /* XL - Applies <= 1280px */
 @media screen and (max-width: 80em) {
-	.pt-flex__row.bp-xl {
+	.pt-flex__row.pt-bp__xl {
 		flex-direction: row;
 	}
-	.pt-flex__row.pt-flex__reverse.bp-xl {
+	.pt-flex__row.pt-flex__reverse.pt-bp__xl {
 		flex-direction: row-reverse;
 	}
-	.pt-flex__col.bp-xl {
+	.pt-flex__col.pt-bp__xl {
 		flex-direction: column;
 	}
-	.pt-flex__col.pt-flex__reverse.bp-xl {
+	.pt-flex__col.pt-flex__reverse.pt-bp__xl {
 		flex-direction: column-reverse;
 	}
-	.pt-flex__col.bp-xl .pt-flex__item {
+	.pt-flex__col.pt-bp__xl .pt-flex__item {
 		flex: 1 1 auto;
 		max-width: 100%;
 		margin-left: 0;
 	}
 }
-/* X2L - Applies <= 1920px */
+/* X2L - Applies <= 1440px */
+@media screen and (max-width: 90em) {
+	.pt-flex__row.pt-bp__x2l {
+		flex-direction: row;
+	}
+	.pt-flex__row.pt-flex__reverse.pt-bp__x2l {
+		flex-direction: row-reverse;
+	}
+	.pt-flex__col.pt-bp__x2l {
+		flex-direction: column;
+	}
+	.pt-flex__col.pt-flex__reverse.pt-bp__x2l {
+		flex-direction: column-reverse;
+	}
+	.pt-flex__col.pt-bp__x2l .pt-flex__item {
+		flex: 1 1 auto;
+		max-width: 100%;
+		margin-left: 0;
+	}
+}
+/* X3L - Applies <= 1920px */
 @media screen and (max-width: 120em) {
-	.pt-flex__row.bp-x2l {
+	.pt-flex__row.pt-bp__x3l {
 		flex-direction: row;
 	}
-	.pt-flex__row.pt-flex__reverse.bp-x2l {
+	.pt-flex__row.pt-flex__reverse.pt-bp__x3l {
 		flex-direction: row-reverse;
 	}
-	.pt-flex__col.bp-x2l {
+	.pt-flex__col.pt-bp__x3l {
 		flex-direction: column;
 	}
-	.pt-flex__col.pt-flex__reverse.bp-x2l {
+	.pt-flex__col.pt-flex__reverse.pt-bp__x3l {
 		flex-direction: column-reverse;
 	}
-	.pt-flex__col.bp-x2l .pt-flex__item {
+	.pt-flex__col.pt-bp__x3l .pt-flex__item {
 		flex: 1 1 auto;
 		max-width: 100%;
 		margin-left: 0;
 	}
 }
-/* X3L - Applies <= 2560px */
-@media screen and (max-width: 160em) {
-	.pt-flex__row.bp-x3l {
+/* X2K - Applies <= 2560px */
+@media screen and (max-width: 120em) {
+	.pt-flex__row.pt-bp__x2k {
 		flex-direction: row;
 	}
-	.pt-flex__row.pt-flex__reverse.bp-x3l {
+	.pt-flex__row.pt-flex__reverse.pt-bp__x2k {
 		flex-direction: row-reverse;
 	}
-	.pt-flex__col.bp-x3l {
+	.pt-flex__col.pt-bp__x2k {
 		flex-direction: column;
 	}
-	.pt-flex__col.pt-flex__reverse.bp-x3l {
+	.pt-flex__col.pt-flex__reverse.pt-bp__x2k {
 		flex-direction: column-reverse;
 	}
-	.pt-flex__col.bp-x3l .pt-flex__item {
+	.pt-flex__col.pt-bp__x2k .pt-flex__item {
 		flex: 1 1 auto;
 		max-width: 100%;
 		margin-left: 0;