diff --git a/core/themes/claro/css/components/system-admin--panel.css b/core/themes/claro/css/components/system-admin--panel.css
index 653553115c68c598bdd02b37685b5b35d4dc792f..c1f32045c09beaa0029a6b0999e039ddd3146797 100644
--- a/core/themes/claro/css/components/system-admin--panel.css
+++ b/core/themes/claro/css/components/system-admin--panel.css
@@ -11,15 +11,15 @@
  */
 
 .panel {
-  margin-top: 1em;
-  margin-bottom: 3em;
+  margin-block: 1em 3em;
   padding: 0;
-  border-bottom: calc(1em / 16) solid var(--color-gray-200);
+  border-block-end: calc(1em / 16) solid var(--color-gray-200);
 }
 
 .panel__title {
   margin: 0;
-  padding: calc(12em / 18) calc(24em / 18);
+  padding-block: calc(12em / 18);
+  padding-inline: calc(24em / 18);
   background: var(--color-gray-050);
   font-size: calc(18em / 16);
   line-height: calc(24em / 18);
@@ -27,5 +27,6 @@
 
 .panel__content,
 .panel__description {
-  padding: 1em 1.5em;
+  padding-block: 1em;
+  padding-inline: 1.5em;
 }
diff --git a/core/themes/claro/css/components/system-admin--panel.pcss.css b/core/themes/claro/css/components/system-admin--panel.pcss.css
index 5ef1e87111da40e77baab2ca439725c5df663095..85eac99e44d92bb87f76cb07b202531a5a5a3f8c 100644
--- a/core/themes/claro/css/components/system-admin--panel.pcss.css
+++ b/core/themes/claro/css/components/system-admin--panel.pcss.css
@@ -4,19 +4,20 @@
  */
 
 .panel {
-  margin-top: 1em;
-  margin-bottom: 3em;
+  margin-block: 1em 3em;
   padding: 0;
-  border-bottom: calc(1em / 16) solid var(--color-gray-200);
+  border-block-end: calc(1em / 16) solid var(--color-gray-200);
 }
 .panel__title {
   margin: 0;
-  padding: calc(12em / 18) calc(24em / 18);
+  padding-block: calc(12em / 18);
+  padding-inline: calc(24em / 18);
   background: var(--color-gray-050);
   font-size: calc(18em / 16);
   line-height: calc(24em / 18);
 }
 .panel__content,
 .panel__description {
-  padding: 1em 1.5em;
+  padding-block: 1em;
+  padding-inline: 1.5em;
 }