diff --git a/core/themes/claro/css/components/page-title.css b/core/themes/claro/css/components/page-title.css
index fcb0d7e923..220a5e9c7c 100644
--- a/core/themes/claro/css/components/page-title.css
+++ b/core/themes/claro/css/components/page-title.css
@@ -11,22 +11,11 @@
  */
 
 .block-page-title-block {
-  margin-bottom: var(--space-s);
+  margin-block-start: var(--space-s);
 }
 
 .block-page-title-block:last-child {
-  margin-bottom: var(--space-l);
-}
-
-/**
- * There are use cases where page title is not rendered as a block ¯\_(ツ)_/¯.
- *
- * @see Drupal\system\Controller\BatchController::batchPage()
- */
-
-.region-header > .page-title {
-  margin-top: var(--breadcrumb-height);
-  margin-bottom: var(--space-l);
+  margin-block-end: var(--space-l);
 }
 
 .page-title {
@@ -35,3 +24,12 @@
   font-size: var(--font-size-h1);
   -webkit-font-smoothing: antialiased;
 }
+
+.region-header > .page-title {
+  /**
+     * In this case page title is not rendered as a block ¯\_(ツ)_/¯.
+     *
+     * @see Drupal\system\Controller\BatchController::batchPage()
+     */
+  margin-block: var(--breadcrumb-height) var(--space-l);
+}
diff --git a/core/themes/claro/css/components/page-title.pcss.css b/core/themes/claro/css/components/page-title.pcss.css
index d5728d5c88..4fc1d1bc3b 100644
--- a/core/themes/claro/css/components/page-title.pcss.css
+++ b/core/themes/claro/css/components/page-title.pcss.css
@@ -4,21 +4,11 @@
  */
 
 .block-page-title-block {
-  margin-bottom: var(--space-s);
-}
-
-.block-page-title-block:last-child {
-  margin-bottom: var(--space-l);
-}
+  margin-block-start: var(--space-s);
 
-/**
- * There are use cases where page title is not rendered as a block ¯\_(ツ)_/¯.
- *
- * @see Drupal\system\Controller\BatchController::batchPage()
- */
-.region-header > .page-title {
-  margin-top: var(--breadcrumb-height);
-  margin-bottom: var(--space-l);
+  &:last-child {
+    margin-block-end: var(--space-l);
+  }
 }
 
 .page-title {
@@ -26,4 +16,13 @@
   margin: 0;
   font-size: var(--font-size-h1);
   -webkit-font-smoothing: antialiased;
+
+  @nest .region-header > & {
+    /**
+     * In this case page title is not rendered as a block ¯\_(ツ)_/¯.
+     *
+     * @see Drupal\system\Controller\BatchController::batchPage()
+     */
+    margin-block: var(--breadcrumb-height) var(--space-l);
+  }
 }