diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css
index 1ee784f4f0..5c6d6d5e68 100644
--- a/core/themes/claro/css/components/fieldset.css
+++ b/core/themes/claro/css/components/fieldset.css
@@ -37,27 +37,27 @@
   display: contents; /* For Firefox. */
   float: left; /* iOS Safari, Android Chrome, Edge. */
   width: 100%; /* iOS Safari, Android Chrome, Edge. */
-  margin-bottom: var(--space-m);
+  margin-block-end: var(--space-m);
   color: var(--color-gray-800);
   font-weight: bold;
 }
 
-@media screen and (min-width: 48em) {
-  .fieldset__legend {
-    margin-bottom: var(--space-l);
-  }
-}
-
 .fieldset__legend--composite {
   float: none;
   width: auto;
-  margin-top: calc(var(--space-xs) / 2); /* 4px */
-  margin-bottom: calc(var(--space-xs) / 2); /* 4px */
+  margin-block-start: calc(var(--space-xs) / 2); /* 4px */
+  margin-block-end: calc(var(--space-xs) / 2); /* 4px */
   color: inherit;
   font-size: var(--font-size-s); /* 14px */
   line-height: calc(18rem / 16); /* 18px */
 }
 
+@media screen and (min-width: 48em) {
+  .fieldset__legend {
+    margin-bottom: var(--space-l);
+  }
+}
+
 /* This is used only on install configure form. */
 
 .fieldset__legend--group {
@@ -71,11 +71,12 @@
   line-height: var(--space-m);
 }
 
-@media screen and (min-width: 48em) {
-  .fieldset__label {
-    padding-right: var(--space-l);
-    padding-left: var(--space-l);
-  }
+.fieldset__label.is-disabled {
+  color: var(--input--disabled-fg-color);
+}
+
+.fieldset__label.has-error {
+  color: var(--input--error-color);
 }
 
 .fieldset__label--group {
@@ -83,17 +84,16 @@
   line-height: inherit;
 }
 
-.fieldset__label.is-disabled {
-  color: var(--input--disabled-fg-color);
-}
-
-.fieldset__label.has-error {
-  color: var(--input--error-color);
+@media screen and (min-width: 48em) {
+  .fieldset__label {
+    padding-right: var(--space-l);
+    padding-left: var(--space-l);
+  }
 }
 
 .fieldset__description {
-  margin-top: calc(6rem / 16); /* 6px */
-  margin-bottom: calc(6rem / 16); /* 6px */
+  margin-block-start: calc(6rem / 16); /* 6px */
+  margin-block-end: calc(6rem / 16); /* 6px */
   color: var(--input-fg-color--description);
   font-size: var(--font-size-xs); /* ~13px */
   line-height: calc(17rem / 16); /* 17px */
@@ -106,8 +106,8 @@
 /* Error message (Inline form errors). */
 
 .fieldset__error-message {
-  margin-top: calc(6rem / 16); /* 6px */
-  margin-bottom: calc(6rem / 16); /* 6px */
+  margin-block-start: calc(6rem / 16); /* 6px */
+  margin-block-end: calc(6rem / 16); /* 6px */
   color: var(--input--error-color);
   font-size: var(--font-size-xs); /* ~13px */
   font-weight: normal;
@@ -116,6 +116,13 @@
 
 .fieldset__wrapper {
   margin: var(--space-m);
+  /**
+   * Remove the extra padding of container-inline wrapper if it's used inside a fieldset
+   */
+}
+
+.fieldset__wrapper > .container-inline {
+  padding: 0;
 }
 
 @media screen and (min-width: 48em) {
@@ -125,18 +132,9 @@
 }
 
 .fieldset__legend--visible ~ .fieldset__wrapper {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 .fieldset__wrapper--group {
   margin: 0;
 }
-
-/**
- * Remove the unnecessary extra padding of container-inline wrapper if it's used
- * inside a fieldset.
- */
-
-.fieldset__wrapper > .container-inline {
-  padding: 0;
-}
diff --git a/core/themes/claro/css/components/fieldset.pcss.css b/core/themes/claro/css/components/fieldset.pcss.css
index 82c91ca358..c7334c2754 100644
--- a/core/themes/claro/css/components/fieldset.pcss.css
+++ b/core/themes/claro/css/components/fieldset.pcss.css
@@ -29,27 +29,27 @@
   display: contents; /* For Firefox. */
   float: left; /* iOS Safari, Android Chrome, Edge. */
   width: 100%; /* iOS Safari, Android Chrome, Edge. */
-  margin-bottom: var(--space-m);
+  margin-block-end: var(--space-m);
   color: var(--color-gray-800);
   font-weight: bold;
 }
 
-@media screen and (min-width: 48em) {
-  .fieldset__legend {
-    margin-bottom: var(--space-l);
-  }
-}
-
 .fieldset__legend--composite {
   float: none;
   width: auto;
-  margin-top: calc(var(--space-xs) / 2); /* 4px */
-  margin-bottom: calc(var(--space-xs) / 2); /* 4px */
+  margin-block-start: calc(var(--space-xs) / 2); /* 4px */
+  margin-block-end: calc(var(--space-xs) / 2); /* 4px */
   color: inherit;
   font-size: var(--font-size-s); /* 14px */
   line-height: calc(18rem / 16); /* 18px */
 }
 
+@media screen and (min-width: 48em) {
+  .fieldset__legend {
+    margin-bottom: var(--space-l);
+  }
+}
+
 /* This is used only on install configure form. */
 .fieldset__legend--group {
   text-transform: uppercase;
@@ -60,12 +60,12 @@
   display: block;
   padding: var(--space-m);
   line-height: var(--space-m);
-}
+  &.is-disabled {
+    color: var(--input--disabled-fg-color);
+  }
 
-@media screen and (min-width: 48em) {
-  .fieldset__label {
-    padding-right: var(--space-l);
-    padding-left: var(--space-l);
+  &.has-error {
+    color: var(--input--error-color);
   }
 }
 
@@ -74,30 +74,28 @@
   line-height: inherit;
 }
 
-.fieldset__label.is-disabled {
-  color: var(--input--disabled-fg-color);
-}
-
-.fieldset__label.has-error {
-  color: var(--input--error-color);
+@media screen and (min-width: 48em) {
+  .fieldset__label {
+    padding-right: var(--space-l);
+    padding-left: var(--space-l);
+  }
 }
 
 .fieldset__description {
-  margin-top: calc(6rem / 16); /* 6px */
-  margin-bottom: calc(6rem / 16); /* 6px */
+  margin-block-start: calc(6rem / 16); /* 6px */
+  margin-block-end: calc(6rem / 16); /* 6px */
   color: var(--input-fg-color--description);
   font-size: var(--font-size-xs); /* ~13px */
   line-height: calc(17rem / 16); /* 17px */
-}
-
-.fieldset__description.is-disabled {
-  color: var(--input--disabled-fg-color);
+  &.is-disabled {
+    color: var(--input--disabled-fg-color);
+  }
 }
 
 /* Error message (Inline form errors). */
 .fieldset__error-message {
-  margin-top: calc(6rem / 16); /* 6px */
-  margin-bottom: calc(6rem / 16); /* 6px */
+  margin-block-start: calc(6rem / 16); /* 6px */
+  margin-block-end: calc(6rem / 16); /* 6px */
   color: var(--input--error-color);
   font-size: var(--font-size-xs); /* ~13px */
   font-weight: normal;
@@ -106,6 +104,12 @@
 
 .fieldset__wrapper {
   margin: var(--space-m);
+  /**
+   * Remove the extra padding of container-inline wrapper if it's used inside a fieldset
+   */
+   & > .container-inline{
+    padding: 0;
+   }
 }
 
 @media screen and (min-width: 48em) {
@@ -115,17 +119,9 @@
 }
 
 .fieldset__legend--visible ~ .fieldset__wrapper {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 .fieldset__wrapper--group {
   margin: 0;
 }
-
-/**
- * Remove the unnecessary extra padding of container-inline wrapper if it's used
- * inside a fieldset.
- */
-.fieldset__wrapper > .container-inline {
-  padding: 0;
-}