diff --git a/core/scripts/css/compile.js b/core/scripts/css/compile.js
index 58f9fbf443..4f9bd29673 100644
--- a/core/scripts/css/compile.js
+++ b/core/scripts/css/compile.js
@@ -48,7 +48,20 @@ module.exports = (filePath, callback) => {
         }
       }),
       postcssCalc,
-      postcssPixelsToRem,
+      postcssPixelsToRem({
+        propList: [
+          '*',
+          '!border',
+          '!border-top*',
+          '!border-right*',
+          '!border-bottom*',
+          '!border-left*',
+          '!border-start*',
+          '!border-end*',
+          '!outline*',
+        ],
+        mediaQuery: true,
+      }),
       postcssHeader({
         header: `/*\n * DO NOT EDIT THIS FILE.\n * See the following change record for more information,\n * https://www.drupal.org/node/3084859\n * @preserve\n */\n`,
       }),
diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css
index 345ffc387d..f239d627f9 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -46,7 +46,7 @@ a:active,
 }
 
 hr {
-  height: 1px;
+  height: 0.0625rem;
   margin: 1rem 0;
   padding: 0;
   border: none;
@@ -115,22 +115,22 @@ p {
 }
 
 dl {
-  margin: 0 0 20px;
+  margin: 0 0 1.25rem;
 }
 
 dl dd,
 dl dl {
-  margin-bottom: 10px;
-  margin-left: 20px; /* LTR */
+  margin-bottom: 0.625rem;
+  margin-left: 1.25rem; /* LTR */
 }
 
 [dir="rtl"] dl dd,
 [dir="rtl"] dl dl {
-  margin-right: 20px;
+  margin-right: 1.25rem;
 }
 
 blockquote {
-  margin: 1em 40px;
+  margin: 1em 2.5rem;
 }
 
 address {
@@ -251,5 +251,5 @@ img {
 .page-wrapper *:focus,
 .ui-dialog *:focus {
   outline: 2px dotted transparent;
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769;
 }
diff --git a/core/themes/claro/css/base/off-canvas.theme.css b/core/themes/claro/css/base/off-canvas.theme.css
index 5e2c412d5b..52868af755 100644
--- a/core/themes/claro/css/base/off-canvas.theme.css
+++ b/core/themes/claro/css/base/off-canvas.theme.css
@@ -21,7 +21,7 @@
   color: #ddd;
   border-radius: 0;
   background: #444;
-  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
+  box-shadow: 0 0 0.25rem 0.125rem rgba(0, 0, 0, 0.3333);
 }
 
 .ui-widget.ui-dialog.ui-dialog-off-canvas {
diff --git a/core/themes/claro/css/base/print.css b/core/themes/claro/css/base/print.css
index 334929e8b4..773292167e 100644
--- a/core/themes/claro/css/base/print.css
+++ b/core/themes/claro/css/base/print.css
@@ -48,15 +48,15 @@
     background: none !important;
   }
   .messages {
-    border-width: 1px;
+    border-width: 0.0625rem;
     border-color: #999;
   }
   .is-collapse-enabled .tabs {
     max-height: 999em;
   }
   .is-horizontal .tabs__tab {
-    margin: 0 4px !important;
-    border-radius: 4px 4px 0 0 !important;
+    margin: 0 0.25rem !important;
+    border-radius: 0.25rem 0.25rem 0 0 !important;
   }
   .dropbutton-multiple .dropbutton .secondary-action {
     display: block;
@@ -69,7 +69,7 @@
     display: none;
   }
   .js .dropbutton-multiple .dropbutton-widget {
-    border-radius: 4px;
+    border-radius: 0.25rem;
     background: none;
   }
   input.form-autocomplete,
@@ -83,6 +83,6 @@
   input.form-file,
   textarea.form-textarea,
   select.form-select {
-    border-width: 1px;
+    border-width: 0.0625rem;
   }
 }
diff --git a/core/themes/claro/css/base/typography.css b/core/themes/claro/css/base/typography.css
index a6ef0768e7..bc423c3302 100644
--- a/core/themes/claro/css/base/typography.css
+++ b/core/themes/claro/css/base/typography.css
@@ -9,34 +9,34 @@
 * with the base line height of Claro.
 */
 .leader {
-  margin-top: 20px;
+  margin-top: 1.25rem;
   margin-top: 1.538rem;
 }
 .leader-double {
-  margin-top: 40px;
+  margin-top: 2.5rem;
   margin-top: 3.076rem;
 }
 .leader-triple {
-  margin-top: 60px;
+  margin-top: 3.75rem;
   margin-top: 4.614rem;
 }
 .leader-quadruple {
-  margin-top: 80px;
+  margin-top: 5rem;
   margin-top: 6.152rem;
 }
 .trailer {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
   margin-bottom: 1.538rem;
 }
 .trailer-double {
-  margin-bottom: 40px;
+  margin-bottom: 2.5rem;
   margin-bottom: 3.076rem;
 }
 .trailer-triple {
-  margin-bottom: 60px;
+  margin-bottom: 3.75rem;
   margin-bottom: 4.614rem;
 }
 .trailer-quadruple {
-  margin-bottom: 80px;
+  margin-bottom: 5rem;
   margin-bottom: 6.152rem;
 }
diff --git a/core/themes/claro/css/components/accordion.css b/core/themes/claro/css/components/accordion.css
index 5446d79ea8..2aa7dc19d2 100644
--- a/core/themes/claro/css/components/accordion.css
+++ b/core/themes/claro/css/components/accordion.css
@@ -13,28 +13,28 @@
 .accordion {
   color: #222330;
   border: 1px solid rgba(216, 217, 224, 0.8);
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
 }
 
 .accordion__item {
-  margin: 0 -1px;
+  margin: 0 -0.0625rem;
   border-radius: 0;
 }
 
 .accordion__item:first-child {
-  margin-top: -1px;
+  margin-top: -0.0625rem;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 }
 
 .accordion__item + .accordion__item {
-  margin-top: -1px;
+  margin-top: -0.0625rem;
 }
 
 .accordion__item:last-child {
-  margin-bottom: -1px;
+  margin-bottom: -0.0625rem;
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
 }
diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css
index 5e7ef9affc..1b1a10b7a1 100644
--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -54,7 +54,7 @@
   cursor: pointer;
   text-decoration: none;
   color: #545560;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background-color: #fff;
   font-size: 1rem;
   font-weight: 700;
diff --git a/core/themes/claro/css/components/ajax-progress.module.css b/core/themes/claro/css/components/ajax-progress.module.css
index 1feb9dc5ab..e92a65f800 100644
--- a/core/themes/claro/css/components/ajax-progress.module.css
+++ b/core/themes/claro/css/components/ajax-progress.module.css
@@ -32,7 +32,7 @@
   display: inline-flex;
   align-content: center;
   height: 1.125rem;
-  margin: -3px 0.75rem 0;
+  margin: -0.1875rem 0.75rem 0;
   vertical-align: middle;
   white-space: nowrap;
   line-height: 1.125rem;
@@ -132,7 +132,7 @@
    */
   @supports (-ms-ime-align:auto) {
     [dir="rtl"] .ajax-progress__throbber {
-      border-width: 4px;
+      border-width: 0.25rem;
     }
   }
 }
diff --git a/core/themes/claro/css/components/button.css b/core/themes/claro/css/components/button.css
index a1dacb6657..6ba7fe8307 100644
--- a/core/themes/claro/css/components/button.css
+++ b/core/themes/claro/css/components/button.css
@@ -38,13 +38,13 @@
 .button {
   display: inline-block;
   margin: 1rem 0.75rem 1rem 0; /* LTR */
-  padding: calc(1rem - 1px) calc(1.5rem - 1px); /* 1 */
+  padding: calc(1rem - 0.0625rem) calc(1.5rem - 0.0625rem); /* 1 */
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   color: #222330;
   border: 1px solid transparent !important;  /* 2 */
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background-color: #d4d4d8;
   font-size: 1rem;
   font-weight: 700;
@@ -60,7 +60,7 @@
 }
 
 .button:not(:focus) {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.25);
 }
 
 .button:hover {
@@ -80,7 +80,7 @@
 
 .no-touchevents .button--small {
   margin: 0.75rem 0.5rem 0.75rem 0; /* LTR */
-  padding: calc(0.5rem - 1px) calc(1rem - 1px); /* 1 */
+  padding: calc(0.5rem - 0.0625rem) calc(1rem - 0.0625rem); /* 1 */
   font-size: 0.79rem;
 }
 
@@ -88,7 +88,7 @@
 
 .no-touchevents .button--extrasmall {
   margin: 0.5rem 0.5rem 0.5rem 0; /* LTR */
-  padding: calc(0.25rem - 1px) calc(0.75rem - 1px); /* 1 */
+  padding: calc(0.25rem - 0.0625rem) calc(0.75rem - 0.0625rem); /* 1 */
   font-size: 0.79rem;
 }
 
diff --git a/core/themes/claro/css/components/card.css b/core/themes/claro/css/components/card.css
index 5508a913ae..6736a46d28 100644
--- a/core/themes/claro/css/components/card.css
+++ b/core/themes/claro/css/components/card.css
@@ -17,9 +17,9 @@
   justify-items: flex-start;
   padding: 0;
   border: 1px solid rgba(212, 212, 218, 0.8);
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background-color: #fff;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
 }
 
 /* 588px theme screenshot width */
@@ -48,17 +48,17 @@
 
 .card__image {
   overflow: hidden;
-  border-radius: 1px 1px 0 0;
+  border-radius: 0.0625rem 0.0625rem 0 0;
   line-height: 0;
 }
 
 @media screen and (min-width: 36.75rem) {
   .card--horizontal .card__image {
     flex-basis: 35%;
-    border-radius: 1px 0 0 1px; /* LTR */
+    border-radius: 0.0625rem 0 0 0.0625rem; /* LTR */
   }
   [dir="rtl"] .card--horizontal .card__image {
-    border-radius: 0 1px 1px 0;
+    border-radius: 0 0.0625rem 0.0625rem 0;
   }
 }
 
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index a078e3ada9..266c902c55 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -41,9 +41,9 @@
   margin-bottom: 1rem;
   color: #222330;
   border: 1px solid rgba(216, 217, 224, 0.8);
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
 }
 
 .claro-details--accordion-item,
@@ -80,7 +80,7 @@
   -ms-hyphens: auto;
   hyphens: auto;
   color: #545560;
-  border-radius: 1px;
+  border-radius: 0.0625rem;
   background-color: transparent;
   line-height: 1rem;
 }
@@ -214,16 +214,16 @@
 
 .claro-details__summary::after {
   position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
+  top: -0.0625rem;
+  right: -0.0625rem;
+  bottom: -0.0625rem;
+  left: -0.0625rem;
   content: "";
   transition: opacity 0.2s ease-in-out;
   pointer-events: none;
   opacity: 0;
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 3px #26a769;
+  border-radius: 0.125rem;
+  box-shadow: inset 0 0 0 0.1875rem #26a769;
 }
 
 .claro-details > .claro-details__summary--accordion-item::after,
@@ -279,7 +279,7 @@
 }
 
 .claro-details[open] > .claro-details__summary {
-  border-radius: 1px 1px 0 0;
+  border-radius: 0.0625rem 0.0625rem 0 0;
 }
 
 .claro-details[open] > .claro-details__summary::before {
@@ -304,7 +304,7 @@
 .claro-details[open] > .claro-details__summary--accordion,
 .claro-details[open] > .claro-details__summary--accordion-item,
 .claro-details[open] > .claro-details__summary--vertical-tabs-item {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
 }
 
 .claro-details__summary:hover {
@@ -329,7 +329,7 @@
 .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
   opacity: 1;
   border: 3px solid #003cc5;
-  border-width: 0 0 0 3px; /* LTR */
+  border-width: 0 0 0 0.1875rem; /* LTR */
   box-shadow: none;
 }
 
@@ -339,7 +339,7 @@
 [dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
 [dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
 [dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
-  border-width: 0 3px 0 0;
+  border-width: 0 0.1875rem 0 0;
 }
 
 .claro-details__summary:focus::after,
@@ -472,7 +472,7 @@
   padding: 1rem 1rem 1rem 2.25rem; /* LTR */
   text-decoration: none;
   color: inherit;
-  border-radius: 1px;
+  border-radius: 0.0625rem;
 }
 
 [dir="rtl"] .collapse-processed > .claro-details__summary .details-title {
@@ -505,16 +505,16 @@
 
 .collapse-processed > .claro-details__summary .details-title::after {
   position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
+  top: -0.0625rem;
+  right: -0.0625rem;
+  bottom: -0.0625rem;
+  left: -0.0625rem;
   content: "";
   transition: opacity 0.2s ease-in-out;
   pointer-events: none;
   opacity: 0;
   border: 3px solid #26a769;
-  border-radius: 2px;
+  border-radius: 0.125rem;
 }
 
 .collapse-processed > .claro-details__summary .details-title:focus::after {
@@ -558,16 +558,16 @@
   .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
   .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
   .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
-    top: -1px;
-    right: -1px;
-    bottom: -1px;
-    left: -1px;
+    top: -0.0625rem;
+    right: -0.0625rem;
+    bottom: -0.0625rem;
+    left: -0.0625rem;
   }
   .collapse-processed > .claro-details__summary .details-title::after {
-    top: -5px;
-    right: -5px;
-    bottom: -5px;
-    left: -5px;
+    top: -0.3125rem;
+    right: -0.3125rem;
+    bottom: -0.3125rem;
+    left: -0.3125rem;
     border: 2px dotted;
   }
 }
diff --git a/core/themes/claro/css/components/dialog.css b/core/themes/claro/css/components/dialog.css
index 48e9358cc6..a9ea82fc91 100644
--- a/core/themes/claro/css/components/dialog.css
+++ b/core/themes/claro/css/components/dialog.css
@@ -13,14 +13,14 @@
 .ui-dialog {
   padding: 0;
   border: 0;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   background: transparent;
   box-shadow: 0 0 1rem -0.25rem #222330;
 }
 
 .ui-dialog:focus {
   outline: 2px dotted transparent;
-  box-shadow: 0 0 0 3px #26a769;
+  box-shadow: 0 0 0 0.1875rem #26a769;
 }
 
 @media all and (max-width: 48em) { /* 768px */
diff --git a/core/themes/claro/css/components/divider.css b/core/themes/claro/css/components/divider.css
index c5836b3f61..bc52acffca 100644
--- a/core/themes/claro/css/components/divider.css
+++ b/core/themes/claro/css/components/divider.css
@@ -10,6 +10,6 @@
  */
 
 .divider {
-  height: 1px;
+  height: 0.0625rem;
   background-color: rgba(142, 146, 156, 0.5);
 }
diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index 8dc6094cb2..24c181e0d2 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -24,8 +24,8 @@
 
 .dropbutton-wrapper {
   display: inline-flex;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  border-radius: 0.125rem;
+  box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.25);
 }
 
 .form-actions .dropbutton-wrapper {
@@ -80,32 +80,32 @@
  */
 
 .js .dropbutton--multiple .dropbutton__item:first-of-type {
-  margin-right: calc(3rem + 1px); /* LTR */
+  margin-right: calc(3rem + 0.0625rem); /* LTR */
 }
 
 [dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {
   margin-right: 0;
-  margin-left: calc(3rem + 1px);
+  margin-left: calc(3rem + 0.0625rem);
 }
 
 /* First dropbutton list item variants */
 
 .js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
-  margin-right: calc(2rem + 1px); /* LTR */
+  margin-right: calc(2rem + 0.0625rem); /* LTR */
 }
 
 [dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
   margin-right: 0;
-  margin-left: calc(2rem + 1px);
+  margin-left: calc(2rem + 0.0625rem);
 }
 
 .js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
-  margin-right: calc(1.5rem + 1px); /* LTR */
+  margin-right: calc(1.5rem + 0.0625rem); /* LTR */
 }
 
 [dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
   margin-right: 0;
-  margin-left: calc(1.5rem + 1px);
+  margin-left: calc(1.5rem + 0.0625rem);
 }
 
 /**
@@ -121,7 +121,7 @@
   width: 3rem;
   height: 3rem;
   border: 1px solid transparent !important; /* 1 */
-  border-radius: 0 2px 2px 0; /* LTR */
+  border-radius: 0 0.125rem 0.125rem 0; /* LTR */
   background: #d4d4d8;
   font-size: 0.0625rem; /* iOS Safari sets a minimum button-width based on font-size. */
   -webkit-appearance: none;
@@ -132,7 +132,7 @@
 [dir="rtl"] .dropbutton__toggle {
   right: auto;
   left: 0;
-  border-radius: 2px 0 0 2px;
+  border-radius: 0.125rem 0 0 0.125rem;
 }
 
 .dropbutton__toggle::before {
@@ -152,7 +152,7 @@
 .dropbutton__toggle:hover {
   color: #222330;
   background-color: #c2c3ca;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
 }
 
 .dropbutton__toggle:focus {
@@ -234,13 +234,13 @@
 .dropbutton__item:first-of-type > * {
   display: inline-block;
   margin: 0;
-  padding: calc(1rem - 1px) calc(1.5rem - 1px);
+  padding: calc(1rem - 0.0625rem) calc(1.5rem - 0.0625rem);
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   color: #222330;
   border: 1px solid transparent !important; /* 1 */
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background-color: #d4d4d8;
   font-size: 1rem;
   font-weight: 700;
@@ -252,22 +252,22 @@
 }
 
 .dropbutton--multiple .dropbutton__item:first-of-type > * {
-  padding-right: calc(1rem - 1px);
-  padding-left: calc(1rem - 1px);
+  padding-right: calc(1rem - 0.0625rem);
+  padding-left: calc(1rem - 0.0625rem);
 }
 
 /* Variants */
 
 .no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {
-  padding-top: calc(0.625rem - 1px);
-  padding-bottom: calc(0.625rem - 1px);
+  padding-top: calc(0.625rem - 0.0625rem);
+  padding-bottom: calc(0.625rem - 0.0625rem);
   font-size: 0.79rem;
   line-height: 0.75rem;
 }
 
 .no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type > * {
-  padding-top: calc(0.375rem - 1px);
-  padding-bottom: calc(0.375rem - 1px);
+  padding-top: calc(0.375rem - 0.0625rem);
+  padding-bottom: calc(0.375rem - 0.0625rem);
   font-size: 0.79rem;
   line-height: 0.75rem;
 }
@@ -277,12 +277,12 @@
   text-decoration: none;
   color: #222330;
   background-color: #c2c3ca;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
 }
 
 .dropbutton__item:first-of-type > *:focus:hover,
 .dropbutton__item:first-of-type > .button:focus:hover {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769;
 }
 
 .dropbutton__item:first-of-type > *:focus {
@@ -304,11 +304,11 @@
 }
 
 .js .dropbutton--multiple .dropbutton__item:first-of-type > * {
-  border-radius: 2px 0 0 2px; /* LTR */
+  border-radius: 0.125rem 0 0 0.125rem; /* LTR */
 }
 
 [dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type > * {
-  border-radius: 0 2px 2px 0;
+  border-radius: 0 0.125rem 0.125rem 0;
 }
 
 .dropbutton > .dropbutton__item > a,
@@ -336,7 +336,7 @@
 .dropbutton__item:first-of-type ~ .dropbutton__item {
   border: 1px solid #d4d4d8;
   border-bottom: 0;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.15);
 }
 
 .dropbutton__item:first-of-type ~ .dropbutton__item ~ .dropbutton__item {
@@ -345,7 +345,7 @@
 
 .dropbutton__item ~ .dropbutton__item:last-child {
   border-bottom: 1px solid #d4d4d8;
-  border-radius: 0 0 2px 2px;
+  border-radius: 0 0 0.125rem 0.125rem;
 }
 
 /**
@@ -355,11 +355,11 @@
 .dropbutton__item:first-of-type ~ .dropbutton__item > a,
 .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
   position: relative;
-  padding: calc(1rem - 1px);
+  padding: calc(1rem - 0.0625rem);
   text-decoration: none;
   color: #545560;
   border: 1px solid transparent !important; /* 1 */
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background: #fff;
   box-shadow: 0;
   font-size: 1rem;
@@ -421,5 +421,5 @@
 
 .dropbutton__item:first-of-type ~ .dropbutton__item > *:focus {
   border-color: #26a769 !important; /* 1 */
-  box-shadow: inset 0 0 0 1px #26a769, 0 0 0 1px #26a769;
+  box-shadow: inset 0 0 0 0.0625rem #26a769, 0 0 0 0.0625rem #26a769;
 }
diff --git a/core/themes/claro/css/components/entity-meta.css b/core/themes/claro/css/components/entity-meta.css
index 2f82300aa2..552332b4cf 100644
--- a/core/themes/claro/css/components/entity-meta.css
+++ b/core/themes/claro/css/components/entity-meta.css
@@ -14,7 +14,7 @@
   padding: 0.5rem 1rem 1rem;
   color: #222330;
   border: 1px solid rgba(216, 217, 224, 0.8);
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background-color: #fff;
 }
 
@@ -31,7 +31,7 @@
 
 .entity-meta__title {
   margin: 0.25em 0;
-  text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 0.0625rem 0 #fff;
   font-size: 1.231em;
   font-weight: bold;
 }
diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css
index 99532d3592..9938263d8b 100644
--- a/core/themes/claro/css/components/fieldset.css
+++ b/core/themes/claro/css/components/fieldset.css
@@ -16,9 +16,9 @@
   padding: 0;
   color: #222330;
   border: 1px solid rgba(216, 217, 224, 0.8);
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
 }
 
 .fieldset--group {
diff --git a/core/themes/claro/css/components/form--checkbox-radio--ie.css b/core/themes/claro/css/components/form--checkbox-radio--ie.css
index 799f5b1fcb..4f6255f966 100644
--- a/core/themes/claro/css/components/form--checkbox-radio--ie.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css
@@ -13,22 +13,22 @@
 .form-boolean::-ms-check {
   display: inline-block;
   box-sizing: border-box;
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
   vertical-align: text-bottom;
   color: transparent; /* IE */
   border: 1px solid #8e929c;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background: #fff no-repeat 50% 50%;
   background-image: url("data:image/svg+xml,%3csvg width='12' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.182 6.966L1.977 4.649l-.182-.19-.18.19-.796.835-.164.173.164.172L4 9.172l.18.19.182-.19 6.818-7.164.164-.172-.164-.173-.795-.835-.181-.19-.182.19-5.841 6.138z' fill='%23FFF'/%3e%3c/svg%3e");
   background-size: 100% 100%;
-  box-shadow: 0 0 0 4px transparent;
+  box-shadow: 0 0 0 0.25rem transparent;
 }
 
 .form-boolean--type-radio::-ms-check {
-  width: 19px;
-  height: 19px;
-  border-radius: 19px;
+  width: 1.1875rem;
+  height: 1.1875rem;
+  border-radius: 1.1875rem;
 }
 
 .form-boolean:focus::-ms-check {
@@ -38,12 +38,12 @@
 .form-boolean:active::-ms-check,
 .form-boolean:hover::-ms-check {
   border-color: #222330;
-  box-shadow: inset 0 0 0 1px #222330;
+  box-shadow: inset 0 0 0 0.0625rem #222330;
 }
 
 .form-boolean:focus:active::-ms-check,
 .form-boolean:focus:hover::-ms-check {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769, inset 0 0 0 0.0625rem #222330;
 }
 
 .form-boolean--type-checkbox:checked::-ms-check {
@@ -63,7 +63,7 @@
   color: transparent; /* IE */
   border-color: #003cc5;
   background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3e%3c/svg%3e");
-  box-shadow: inset 0 0 0 1px #003cc5;
+  box-shadow: inset 0 0 0 0.0625rem #003cc5;
 }
 
 .form-boolean--type-checkbox:checked:active::-ms-check,
@@ -75,23 +75,23 @@
 .form-boolean--type-radio:checked::-ms-check {
   border-color: #003cc5;
   background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3e%3c/svg%3e");
-  box-shadow: inset 0 0 0 1px #003cc5;
+  box-shadow: inset 0 0 0 0.0625rem #003cc5;
 }
 
 .form-boolean--type-radio:checked:focus::-ms-check {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769, inset 0 0 0 0.0625rem #003cc5;
 }
 
 .form-boolean--type-radio:checked:active::-ms-check,
 .form-boolean--type-radio:checked:hover::-ms-check {
   border-color: #222330;
   background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3e%3c/svg%3e");
-  box-shadow: inset 0 0 0 1px #222330;
+  box-shadow: inset 0 0 0 0.0625rem #222330;
 }
 
 .form-boolean--type-radio:checked:focus:active::-ms-check,
 .form-boolean--type-radio:checked:focus:hover::-ms-check {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769, inset 0 0 0 0.0625rem #222330;
 }
 
 /**
@@ -101,18 +101,18 @@
 .form-boolean.error::-ms-check {
   border-color: #d72222;
   background-color: #fff;
-  box-shadow: inset 0 0 0 1px #d72222;
+  box-shadow: inset 0 0 0 0.0625rem #d72222;
 }
 
 .form-boolean.error:active::-ms-check,
 .form-boolean.error:hover::-ms-check {
-  box-shadow: inset 0 0 0 1px #d72222;
+  box-shadow: inset 0 0 0 0.0625rem #d72222;
 }
 
 .form-boolean.error:focus::-ms-check,
 .form-boolean.error:focus:active::-ms-check,
 .form-boolean.error:focus:hover::-ms-check {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769, inset 0 0 0 0.0625rem #d72222;
 }
 
 .form-boolean.error:checked:active::-ms-check,
@@ -134,7 +134,7 @@
 }
 
 .form-boolean--type-radio.error:checked:focus::-ms-check {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769, inset 0 0 0 0.0625rem #d72222;
 }
 
 /**
diff --git a/core/themes/claro/css/components/form--checkbox-radio.css b/core/themes/claro/css/components/form--checkbox-radio.css
index 05084dacea..a677451301 100644
--- a/core/themes/claro/css/components/form--checkbox-radio.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.css
@@ -76,35 +76,35 @@
 .form-boolean {
   display: inline-block;
   box-sizing: border-box;
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
   vertical-align: text-bottom;
   border: 1px solid #8e929c;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background: #fff no-repeat 50% 50%;
   background-image: url("data:image/svg+xml,%3csvg width='12' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.182 6.966L1.977 4.649l-.182-.19-.18.19-.796.835-.164.173.164.172L4 9.172l.18.19.182-.19 6.818-7.164.164-.172-.164-.173-.795-.835-.181-.19-.182.19-5.841 6.138z' fill='%23FFF'/%3e%3c/svg%3e");
   background-size: 100% 100%;
-  box-shadow: 0 0 0 4px transparent;
+  box-shadow: 0 0 0 0.25rem transparent;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
 .form-boolean--type-radio {
-  width: 19px;
-  height: 19px;
-  border-radius: 19px;
+  width: 1.1875rem;
+  height: 1.1875rem;
+  border-radius: 1.1875rem;
 }
 
 .form-boolean:active,
 .form-boolean:hover {
   border-color: #222330;
-  box-shadow: inset 0 0 0 1px #222330;
+  box-shadow: inset 0 0 0 0.0625rem #222330;
 }
 
 .form-boolean:focus:active,
 .form-boolean:focus:hover {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769, inset 0 0 0 0.0625rem #222330;
 }
 
 .form-boolean--type-checkbox:checked {
@@ -122,23 +122,23 @@
 .form-boolean--type-radio:checked {
   border-color: #003cc5;
   background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3e%3c/svg%3e");
-  box-shadow: inset 0 0 0 1px #003cc5;
+  box-shadow: inset 0 0 0 0.0625rem #003cc5;
 }
 
 .form-boolean--type-radio:checked:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769, inset 0 0 0 0.0625rem #003cc5;
 }
 
 .form-boolean--type-radio:checked:active,
 .form-boolean--type-radio:checked:hover {
   border-color: #222330;
   background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3e%3c/svg%3e");
-  box-shadow: inset 0 0 0 1px #222330;
+  box-shadow: inset 0 0 0 0.0625rem #222330;
 }
 
 .form-boolean--type-radio:checked:focus:active,
 .form-boolean--type-radio:checked:focus:hover {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769, inset 0 0 0 0.0625rem #222330;
 }
 
 /**
@@ -148,18 +148,18 @@
 .form-boolean.error {
   border-color: #d72222;
   background-color: #fff;
-  box-shadow: inset 0 0 0 1px #d72222;
+  box-shadow: inset 0 0 0 0.0625rem #d72222;
 }
 
 .form-boolean.error:active,
 .form-boolean.error:hover {
-  box-shadow: inset 0 0 0 1px #d72222;
+  box-shadow: inset 0 0 0 0.0625rem #d72222;
 }
 
 .form-boolean.error:focus,
 .form-boolean.error:focus:active,
 .form-boolean.error:focus:hover {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769, inset 0 0 0 0.0625rem #d72222;
 }
 
 .form-boolean.error:checked:active,
@@ -181,7 +181,7 @@
 }
 
 .form-boolean--type-radio.error:checked:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769, inset 0 0 0 0.0625rem #d72222;
 }
 
 /**
diff --git a/core/themes/claro/css/components/form--managed-file.css b/core/themes/claro/css/components/form--managed-file.css
index f98245f21e..6411c163a9 100644
--- a/core/themes/claro/css/components/form--managed-file.css
+++ b/core/themes/claro/css/components/form--managed-file.css
@@ -228,7 +228,7 @@ td .form-managed-file.no-meta .form-managed-file__image-preview {
 
 .form-managed-file__main .form-element--api-file {
   flex: 1 1 auto;
-  min-width: 1px; /* This makes the element shrink on IE11 */
+  min-width: 0.0625rem; /* This makes the element shrink on IE11 */
 }
 
 /**
diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css
index 3a4e2bcf2f..2a6f5922ea 100644
--- a/core/themes/claro/css/components/form--password-confirm.css
+++ b/core/themes/claro/css/components/form--password-confirm.css
@@ -68,7 +68,7 @@
 }
 
 .password-strength__track {
-  height: calc(0.5rem - 2px);
+  height: calc(0.5rem - 0.125rem);
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   border: 1px solid #8e929c;
@@ -83,9 +83,9 @@
 }
 
 .password-strength__bar {
-  min-width: calc(0.5rem - 2px);
-  height: calc(0.5rem - 2px);
-  margin: -1px;
+  min-width: calc(0.5rem - 0.125rem);
+  height: calc(0.5rem - 0.125rem);
+  margin: -0.0625rem;
   transition: width 0.5s ease-out;
   border: 1px solid transparent;
   border-radius: 0.5rem;
@@ -185,9 +185,9 @@
   padding: 1rem;
   color: #545560;
   border: 1px solid #d4d4d8;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
   font-size: 0.79rem;
 }
 
diff --git a/core/themes/claro/css/components/form--select.css b/core/themes/claro/css/components/form--select.css
index 4d86e14789..bffe491b98 100644
--- a/core/themes/claro/css/components/form--select.css
+++ b/core/themes/claro/css/components/form--select.css
@@ -11,7 +11,7 @@
  */
 
 .form-element--type-select {
-  padding-right: calc(2rem - 1px);
+  padding-right: calc(2rem - 0.0625rem);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: 100% 50%;
@@ -19,21 +19,21 @@
 }
 
 [dir="rtl"] .form-element--type-select {
-  padding-right: calc(1rem - 1px);
-  padding-left: calc(2rem - 1px);
+  padding-right: calc(1rem - 0.0625rem);
+  padding-left: calc(2rem - 0.0625rem);
   background-position: 0 50%;
 }
 
 .no-touchevents .form-element--type-select.form-element--extrasmall,
 .no-touchevents .form-element--type-select[name$="][_weight]"] {
-  padding-right: calc(1.5rem - 1px);
+  padding-right: calc(1.5rem - 0.0625rem);
   background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
 }
 
 [dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
 [dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
-  padding-right: calc(0.5rem - 1px);
-  padding-left: calc(1.5rem - 1px);
+  padding-right: calc(0.5rem - 0.0625rem);
+  padding-left: calc(1.5rem - 0.0625rem);
 }
 
 .form-element--type-select::-ms-expand {
diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css
index d6f254d7fe..2c93e5400d 100644
--- a/core/themes/claro/css/components/form--text.css
+++ b/core/themes/claro/css/components/form--text.css
@@ -14,7 +14,7 @@
   box-sizing: border-box;
   max-width: 100%;
   min-height: 3rem; /* iOS. */
-  padding: calc(0.75rem - 1px) calc(1rem - 1px);
+  padding: calc(0.75rem - 0.0625rem) calc(1rem - 0.0625rem);
   color: #222330;
   border: 1px solid #8e929c;
   border-radius: 0.125rem;
@@ -29,7 +29,7 @@
 .no-touchevents .form-element--extrasmall,
 .no-touchevents .form-element[name$="][_weight]"] {
   min-height: 1.5rem; /* iOS. */
-  padding: calc(0.15rem - 1px) calc(0.5rem - 1px);
+  padding: calc(0.15rem - 0.0625rem) calc(0.5rem - 0.0625rem);
   font-size: 0.889rem;
   line-height: 1.2rem;
 }
@@ -65,7 +65,7 @@
 .form-element--type-color {
   min-width: 3rem; /* Bigger input for webkit */
   padding: 0; /* Bigger pickable area */
-  text-indent: calc(0.75rem - 1px); /* Text-input fallback for non-supporting browsers like Safari */
+  text-indent: calc(0.75rem - 0.0625rem); /* Text-input fallback for non-supporting browsers like Safari */
 }
 
 /**
@@ -110,19 +110,19 @@ _:-ms-fullscreen,
 
 .form-element:hover {
   border-color: #222330;
-  box-shadow: inset 0 0 0 1px #222330;
+  box-shadow: inset 0 0 0 0.0625rem #222330;
 }
 
 .form-element:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769;
 }
 
 .form-element:hover:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769, inset 0 0 0 0.0625rem #222330;
 }
 
 .form-element.error {
-  border-width: 2px;
+  border-width: 0.125rem;
   border-color: #d72222;
 }
 
@@ -131,7 +131,7 @@ _:-ms-fullscreen,
 }
 
 .form-element.error:hover:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769;
 }
 
 .form-element--type-textarea.error + .cke {
@@ -151,7 +151,7 @@ _:-ms-fullscreen,
  * Improve form element usability on narrow devices.
  */
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 37.5rem) {
   /* Number, date and time are skipped here */
   .form-element {
     float: none;
diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css
index e1ffb0b749..a639c37e01 100644
--- a/core/themes/claro/css/components/form.css
+++ b/core/themes/claro/css/components/form.css
@@ -138,7 +138,7 @@ tr .form-item,
 
 /* Add some spacing so that the focus ring and suffix don't overlap. */
 
-@media screen and (min-width: 601px) {
+@media screen and (min-width: 37.5625rem) {
   .form-item__suffix {
     margin-left: 0.5rem; /* LTR */
   }
@@ -205,7 +205,7 @@ tr .form-item,
 .form-item--editor-format .form-item__prefix,
 .form-item--editor-format .form-item__suffix,
 .form-item--editor-format .form-element--editor-format {
-  min-width: 1px;
+  min-width: 0.0625rem;
 }
 
 .form-item--editor-format .form-item__label,
@@ -224,7 +224,7 @@ tr .form-item,
 .form-item--editor-format .form-item__description,
 .form-item--editor-format .form-item__error-message {
   flex: 0 1 100%;
-  min-width: 1px;
+  min-width: 0.0625rem;
 }
 
 /**
@@ -233,7 +233,7 @@ tr .form-item,
  * @legacy
  */
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 37.5rem) {
   .password-strength {
     width: 100%;
   }
diff --git a/core/themes/claro/css/components/help.css b/core/themes/claro/css/components/help.css
index 87e3981f95..fd83b0ab98 100644
--- a/core/themes/claro/css/components/help.css
+++ b/core/themes/claro/css/components/help.css
@@ -11,5 +11,5 @@
  */
 
 .help p {
-  margin: 0 0 10px;
+  margin: 0 0 0.625rem;
 }
diff --git a/core/themes/claro/css/components/jquery.ui/theme.css b/core/themes/claro/css/components/jquery.ui/theme.css
index 50bce0dc2a..a272656037 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.css
@@ -79,9 +79,9 @@
 .ui-icon {
   display: block;
   overflow: hidden;
-  width: 16px;
-  height: 16px;
-  text-indent: -99999px;
+  width: 1rem;
+  height: 1rem;
+  text-indent: -6249.9375rem;
   background-image: url(../../../images/ui-icons-222222-256x240.png);
   background-repeat: no-repeat;
 }
@@ -111,358 +111,358 @@
 }
 
 .ui-widget p .ui-icon {
-  margin: 2px 3px 0 0; /* LTR */
+  margin: 0.125rem 0.1875rem 0 0; /* LTR */
 }
 
 [dir="rtl"] .ui-widget p .ui-icon {
-  margin: 2px 0 0 3px;
+  margin: 0.125rem 0 0 0.1875rem;
 }
 
 /* positioning */
 
-.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-ne { background-position: -1rem 0; }
 
-.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-e { background-position: -2rem 0; }
 
-.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-se { background-position: -3rem 0; }
 
-.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-s { background-position: -4rem 0; }
 
-.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-sw { background-position: -5rem 0; }
 
-.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-w { background-position: -6rem 0; }
 
-.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-1-nw { background-position: -7rem 0; }
 
-.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-n-s { background-position: -8rem 0; }
 
-.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-carat-2-e-w { background-position: -9rem 0; }
 
-.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-n { background-position: 0 -1rem; }
 
-.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-ne { background-position: -1rem -1rem; }
 
-.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-e { background-position: -2rem -1rem; }
 
-.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-se { background-position: -3rem -1rem; }
 
-.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-s { background-position: -4rem -1rem; }
 
-.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-sw { background-position: -5rem -1rem; }
 
-.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-w { background-position: -6rem -1rem; }
 
-.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-1-nw { background-position: -7rem -1rem; }
 
-.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -8rem -1rem; }
 
-.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -9rem -1rem; }
 
-.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-n { background-position: 0 -2rem; }
 
-.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-ne { background-position: -1rem -2rem; }
 
-.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-e { background-position: -2rem -2rem; }
 
-.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-se { background-position: -3rem -2rem; }
 
-.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-s { background-position: -4rem -2rem; }
 
-.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-sw { background-position: -5rem -2rem; }
 
-.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-w { background-position: -6rem -2rem; }
 
-.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-1-nw { background-position: -7rem -2rem; }
 
-.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -8rem -2rem; }
 
-.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -9rem -2rem; }
 
-.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -10rem -2rem; }
 
-.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -11rem -2rem; }
 
-.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -12rem -2rem; }
 
-.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -13rem -2rem; }
 
-.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -14rem -2rem; }
 
-.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -15rem -2rem; }
 
-.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -3rem; }
 
-.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -1rem -3rem; }
 
-.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -2rem -3rem; }
 
-.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -3rem -3rem; }
 
-.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -4rem -3rem; }
 
-.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -5rem -3rem; }
 
-.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -6rem -3rem; }
 
-.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -7rem -3rem; }
 
-.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -8rem -3rem; }
 
-.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -9rem -3rem; }
 
-.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -10rem -3rem; }
 
-.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -11rem -3rem; }
 
-.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -12rem -3rem; }
 
-.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -13rem -3rem; }
 
-.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -14rem -3rem; }
 
-.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -15rem -3rem; }
 
-.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -4rem; }
 
-.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -1rem -4rem; }
 
-.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -2rem -4rem; }
 
-.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -3rem -4rem; }
 
-.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -4rem -4rem; }
 
-.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -5rem -4rem; }
 
-.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -6rem -4rem; }
 
-.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -7rem -4rem; }
 
-.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -8rem -4rem; }
 
-.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -9rem -4rem; }
 
-.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -10rem -4rem; }
 
-.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -11rem -4rem; }
 
-.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4 { background-position: 0 -5rem; }
 
-.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-arrow-4-diag { background-position: -1rem -5rem; }
 
-.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-extlink { background-position: -2rem -5rem; }
 
-.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-newwin { background-position: -3rem -5rem; }
 
-.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-refresh { background-position: -4rem -5rem; }
 
-.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-shuffle { background-position: -5rem -5rem; }
 
-.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transfer-e-w { background-position: -6rem -5rem; }
 
-.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-transferthick-e-w { background-position: -7rem -5rem; }
 
-.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-collapsed { background-position: 0 -6rem; }
 
-.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-folder-open { background-position: -1rem -6rem; }
 
-.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document { background-position: -2rem -6rem; }
 
-.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-document-b { background-position: -3rem -6rem; }
 
-.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-note { background-position: -4rem -6rem; }
 
-.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-closed { background-position: -5rem -6rem; }
 
-.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-mail-open { background-position: -6rem -6rem; }
 
-.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-suitcase { background-position: -7rem -6rem; }
 
-.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-comment { background-position: -8rem -6rem; }
 
-.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-person { background-position: -9rem -6rem; }
 
-.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-print { background-position: -10rem -6rem; }
 
-.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-trash { background-position: -11rem -6rem; }
 
-.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-locked { background-position: -12rem -6rem; }
 
-.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-unlocked { background-position: -13rem -6rem; }
 
-.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-bookmark { background-position: -14rem -6rem; }
 
-.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-tag { background-position: -15rem -6rem; }
 
-.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-home { background-position: 0 -7rem; }
 
-.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-flag { background-position: -1rem -7rem; }
 
-.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-calendar { background-position: -2rem -7rem; }
 
-.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-cart { background-position: -3rem -7rem; }
 
-.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-pencil { background-position: -4rem -7rem; }
 
-.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-clock { background-position: -5rem -7rem; }
 
-.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-disk { background-position: -6rem -7rem; }
 
-.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-calculator { background-position: -7rem -7rem; }
 
-.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomin { background-position: -8rem -7rem; }
 
-.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-zoomout { background-position: -9rem -7rem; }
 
-.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-search { background-position: -10rem -7rem; }
 
-.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-wrench { background-position: -11rem -7rem; }
 
-.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-gear { background-position: -12rem -7rem; }
 
-.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-heart { background-position: -13rem -7rem; }
 
-.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-star { background-position: -14rem -7rem; }
 
-.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-link { background-position: -15rem -7rem; }
 
-.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-cancel { background-position: 0 -8rem; }
 
-.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plus { background-position: -1rem -8rem; }
 
-.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-plusthick { background-position: -2rem -8rem; }
 
-.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minus { background-position: -3rem -8rem; }
 
-.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-minusthick { background-position: -4rem -8rem; }
 
-.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-close { background-position: -5rem -8rem; }
 
-.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-closethick { background-position: -6rem -8rem; }
 
-.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-key { background-position: -7rem -8rem; }
 
-.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-lightbulb { background-position: -8rem -8rem; }
 
-.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-scissors { background-position: -9rem -8rem; }
 
-.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-clipboard { background-position: -10rem -8rem; }
 
-.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-copy { background-position: -11rem -8rem; }
 
-.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-contact { background-position: -12rem -8rem; }
 
-.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-image { background-position: -13rem -8rem; }
 
-.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-video { background-position: -14rem -8rem; }
 
-.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-script { background-position: -15rem -8rem; }
 
-.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-alert { background-position: 0 -9rem; }
 
-.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-info { background-position: -1rem -9rem; }
 
-.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-notice { background-position: -2rem -9rem; }
 
-.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-help { background-position: -3rem -9rem; }
 
-.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-check { background-position: -4rem -9rem; }
 
-.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-bullet { background-position: -5rem -9rem; }
 
-.ui-icon-radio-off { background-position: -96px -144px; }
+.ui-icon-radio-off { background-position: -6rem -9rem; }
 
-.ui-icon-radio-on { background-position: -112px -144px; }
+.ui-icon-radio-on { background-position: -7rem -9rem; }
 
-.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-w { background-position: -8rem -9rem; }
 
-.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-pin-s { background-position: -9rem -9rem; }
 
-.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-play { background-position: 0 -10rem; }
 
-.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-pause { background-position: -1rem -10rem; }
 
-.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-next { background-position: -2rem -10rem; }
 
-.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-prev { background-position: -3rem -10rem; }
 
-.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-end { background-position: -4rem -10rem; }
 
-.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-seek-first { background-position: -5rem -10rem; }
 
-.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-stop { background-position: -6rem -10rem; }
 
-.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-eject { background-position: -7rem -10rem; }
 
-.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-off { background-position: -8rem -10rem; }
 
-.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-volume-on { background-position: -9rem -10rem; }
 
-.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-power { background-position: 0 -11rem; }
 
-.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal-diag { background-position: -1rem -11rem; }
 
-.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-signal { background-position: -2rem -11rem; }
 
-.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-0 { background-position: -3rem -11rem; }
 
-.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-1 { background-position: -4rem -11rem; }
 
-.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-2 { background-position: -5rem -11rem; }
 
-.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-battery-3 { background-position: -6rem -11rem; }
 
-.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-plus { background-position: 0 -12rem; }
 
-.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-minus { background-position: -1rem -12rem; }
 
-.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-close { background-position: -2rem -12rem; }
 
-.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-e { background-position: -3rem -12rem; }
 
-.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-s { background-position: -4rem -12rem; }
 
-.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-w { background-position: -5rem -12rem; }
 
-.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-triangle-n { background-position: -6rem -12rem; }
 
-.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-e { background-position: -7rem -12rem; }
 
-.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-s { background-position: -8rem -12rem; }
 
-.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-w { background-position: -9rem -12rem; }
 
-.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-arrow-n { background-position: -10rem -12rem; }
 
-.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomin { background-position: -11rem -12rem; }
 
-.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-zoomout { background-position: -12rem -12rem; }
 
-.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circle-check { background-position: -13rem -12rem; }
 
-.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-plus { background-position: 0 -13rem; }
 
-.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-minus { background-position: -1rem -13rem; }
 
-.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-circlesmall-close { background-position: -2rem -13rem; }
 
-.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-plus { background-position: -3rem -13rem; }
 
-.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-minus { background-position: -4rem -13rem; }
 
-.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-squaresmall-close { background-position: -5rem -13rem; }
 
-.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -14rem; }
 
-.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -1rem -14rem; }
 
-.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -2rem -14rem; }
 
-.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -3rem -14rem; }
 
-.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -4rem -14rem; }
 
-.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -5rem -14rem; }
 
 .ui-icon-carat-1-n { background-position: 0 0; }
 
@@ -481,7 +481,7 @@
 
 .ui-accordion h3.ui-accordion-header,
 #block-system-main h3.ui-accordion-header {
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.1em;
 }
 
@@ -510,7 +510,7 @@
 
 .ui-tabs .ui-tabs-nav {
   margin: 0;
-  padding: 5px 10px 4px;
+  padding: 0.3125rem 0.625rem 0.25rem;
   border-bottom: solid 1px #ccc;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
@@ -519,18 +519,18 @@
 
 .ui-tabs .ui-tabs-nav li {
   margin: 0;
-  padding: 0 1em 0 10px; /* LTR */
+  padding: 0 1em 0 0.625rem; /* LTR */
   list-style: none;
 }
 
 [dir="rtl"] .ui-tabs .ui-tabs-nav li {
-  padding: 0 10px 0 1em;
+  padding: 0 0.625rem 0 1em;
 }
 
 .ui-tabs .ui-tabs-nav li a {
   float: none;
-  padding: 0 10px;
-  border-radius: 10px;
+  padding: 0 0.625rem;
+  border-radius: 0.625rem;
 }
 
 .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
@@ -566,7 +566,7 @@
   border-right-color: #d2d2d2;
   border-bottom: 1px solid #b4b4b4;
   border-left-color: #d2d2d2;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   background-color: #e4e4e4;
 }
 
diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css
index ad27e3e1c0..9eee89814d 100644
--- a/core/themes/claro/css/components/messages.css
+++ b/core/themes/claro/css/components/messages.css
@@ -28,17 +28,17 @@
   box-sizing: border-box;
   margin-top: 1rem;
   margin-bottom: 1rem;
-  padding: 1.5rem 1.5rem 2rem calc(1.5rem - 5px); /* LTR */
+  padding: 1.5rem 1.5rem 2rem calc(1.5rem - 0.3125rem); /* LTR */
   color: #fff;
-  border-width: 0 0 0 5px; /* LTR */
+  border-width: 0 0 0 0.3125rem; /* LTR */
   border-style: solid;
   border-color: #353641;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background-color: #353641;
 }
 
 [dir="rtl"] .messages {
-  padding-right: calc(1.5rem - 5px);
+  padding-right: calc(1.5rem - 0.3125rem);
   padding-left: 1.5rem;
   border-right-width: 5px;
   border-left-width: 0;
@@ -132,7 +132,7 @@
 
 @media screen and (-ms-high-contrast: active) {
   .messages {
-    border-width: 1px 1px 1px 5px; /* LTR */
+    border-width: 0.0625rem 0.0625rem 0.0625rem 0.3125rem; /* LTR */
   }
   [dir="rtl"] .messages {
     border-right-width: 5px;
diff --git a/core/themes/claro/css/components/progress.css b/core/themes/claro/css/components/progress.css
index 38106bf380..30a5b82fef 100644
--- a/core/themes/claro/css/components/progress.css
+++ b/core/themes/claro/css/components/progress.css
@@ -19,13 +19,13 @@
 }
 
 .progress--small .progress__track {
-  height: calc(0.5rem - 2px);
+  height: calc(0.5rem - 0.125rem);
 }
 
 .progress--small .progress__bar {
-  width: calc(0.5rem - 2px);
-  min-width: calc(0.5rem - 2px);
-  height: calc(0.5rem - 2px);
+  width: calc(0.5rem - 0.125rem);
+  min-width: calc(0.5rem - 0.125rem);
+  height: calc(0.5rem - 0.125rem);
 }
 
 .progress--small .progress__label {
@@ -33,7 +33,7 @@
 }
 
 .progress__track {
-  height: calc(1rem - 2px);
+  height: calc(1rem - 0.125rem);
   margin-top: 0;
   border: 1px #8e929c solid;
   border-radius: 1rem;
@@ -41,11 +41,11 @@
 }
 
 .progress__bar {
-  width: calc(1rem - 2px);
-  min-width: calc(1rem - 2px);
-  height: calc(1rem - 2px);
-  margin-top: -1px;
-  margin-left: -1px; /* LTR */
+  width: calc(1rem - 0.125rem);
+  min-width: calc(1rem - 0.125rem);
+  height: calc(1rem - 0.125rem);
+  margin-top: -0.0625rem;
+  margin-left: -0.0625rem; /* LTR */
   transition: width 0.5s ease-out;
   border: 1px #003cc5 solid;
   border-radius: 1rem;
@@ -53,7 +53,7 @@
 }
 
 [dir="rtl"] .progress__bar {
-  margin-right: -1px;
+  margin-right: -0.0625rem;
   margin-left: 0;
 }
 
diff --git a/core/themes/claro/css/components/quickedit.css b/core/themes/claro/css/components/quickedit.css
index 77e82e2204..88383aadd6 100644
--- a/core/themes/claro/css/components/quickedit.css
+++ b/core/themes/claro/css/components/quickedit.css
@@ -18,11 +18,11 @@
 
 .quickedit-toolbar-container > .quickedit-toolbar-content,
 .quickedit-toolbar-container > .quickedit-toolbar-lining {
-  border-radius: 4px;
+  border-radius: 0.25rem;
 }
 
 .quickedit-button {
-  border-radius: 3px;
+  border-radius: 0.1875rem;
 }
 
 /**
@@ -31,11 +31,11 @@
 
 .quickedit-button.action-save,
 .quickedit-button.action-saving {
-  margin-top: 2px;
+  margin-top: 0.125rem;
   color: #fff;
   border-color: #1e5c90;
   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
-  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+  text-shadow: 0 0.0625rem hsla(0, 0%, 0%, 0.5);
   font-weight: 700;
   -webkit-font-smoothing: antialiased;
 }
@@ -54,14 +54,14 @@
 .quickedit-button.action-save:focus,
 .quickedit-button.action-saving:hover,
 .quickedit-button.action-saving:focus {
-  box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
+  box-shadow: 0 0.0625rem 0.125rem hsla(203, 10%, 10%, 0.25);
 }
 
 .quickedit-button.action-save:active,
 .quickedit-button.action-saving:active {
   border-color: #144b78;
   background-image: linear-gradient(to bottom, #08639b, #0071b8);
-  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+  box-shadow: inset 0 0.0625rem 0.1875rem hsla(0, 0%, 0%, 0.2);
 }
 
 /**
@@ -70,5 +70,5 @@
  */
 
 .quickedit .icon-close:before {
-  top: 8px;
+  top: 0.5rem;
 }
diff --git a/core/themes/claro/css/components/shortcut.css b/core/themes/claro/css/components/shortcut.css
index 7333d17799..eb0ec8b430 100644
--- a/core/themes/claro/css/components/shortcut.css
+++ b/core/themes/claro/css/components/shortcut.css
@@ -38,7 +38,7 @@
   vertical-align: top;
   opacity: 0;
   color: #fff;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background: #545560;
   font-size: 0.889rem;
   -webkit-backface-visibility: hidden;
diff --git a/core/themes/claro/css/components/skip-link.css b/core/themes/claro/css/components/skip-link.css
index 2359f37d1b..44b9002ea9 100644
--- a/core/themes/claro/css/components/skip-link.css
+++ b/core/themes/claro/css/components/skip-link.css
@@ -15,10 +15,10 @@
 .skip-link {
   z-index: 50;
   left: 50%;
-  padding: 1px 10px 2px;
+  padding: 0.0625rem 0.625rem 0.125rem;
   transform: translateX(-50%);
   color: #fff;
-  border-radius: 0 0 10px 10px;
+  border-radius: 0 0 0.625rem 0.625rem;
   background: #444;
   font-size: 0.94em;
 }
diff --git a/core/themes/claro/css/components/system-admin--modules.css b/core/themes/claro/css/components/system-admin--modules.css
index ab2f4e3457..c5bada8a68 100644
--- a/core/themes/claro/css/components/system-admin--modules.css
+++ b/core/themes/claro/css/components/system-admin--modules.css
@@ -20,7 +20,7 @@
 
 .system-modules td.checkbox {
   width: 4%;
-  min-width: 25px;
+  min-width: 1.5625rem;
   padding-left: 1rem; /* LTR */
 }
 
@@ -82,7 +82,7 @@
 
 [dir="rtl"] .system-modules td {
   padding-right: 0;
-  padding-left: 12px;
+  padding-left: 0.75rem;
 }
 
 @media screen and (max-width: 40em) {
@@ -95,8 +95,8 @@
 }
 
 .system-modules .requirements {
-  max-width: 490px;
-  padding: 5px 0;
+  max-width: 30.625rem;
+  padding: 0.3125rem 0;
 }
 
 .system-modules .links {
@@ -104,7 +104,7 @@
 }
 
 .system-modules .checkbox {
-  margin: 0 5px;
+  margin: 0 0.3125rem;
 }
 
 .system-modules .checkbox .form-item {
@@ -129,8 +129,8 @@
 .module-link {
   display: block;
   float: left; /* LTR */
-  margin-top: 2px;
-  padding: 2px 20px;
+  margin-top: 0.125rem;
+  padding: 0.125rem 1.25rem;
   white-space: nowrap;
 }
 
diff --git a/core/themes/claro/css/components/system-admin--status-report.css b/core/themes/claro/css/components/system-admin--status-report.css
index 4a8ed90586..0a0551baa0 100644
--- a/core/themes/claro/css/components/system-admin--status-report.css
+++ b/core/themes/claro/css/components/system-admin--status-report.css
@@ -21,29 +21,29 @@
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  padding: 10px 6px 10px 40px; /* LTR */
+  padding: 0.625rem 0.375rem 0.625rem 2.5rem; /* LTR */
   vertical-align: top;
   background-color: transparent;
   font-weight: normal;
 }
 
 [dir="rtl"] .system-status-report__status-title {
-  padding: 10px 40px 10px 6px;
+  padding: 0.625rem 2.5rem 0.625rem 0.375rem;
 }
 
 .system-status-report__status-icon:before {
   position: absolute;
-  top: 12px;
-  left: 12px; /* LTR */
+  top: 0.75rem;
+  left: 0.75rem; /* LTR */
   display: block;
-  width: 16px;
-  height: 16px;
+  width: 1rem;
+  height: 1rem;
   content: "";
   background-repeat: no-repeat;
 }
 
 [dir="rtl"] .system-status-report__status-icon:before {
-  right: 12px;
+  right: 0.75rem;
   left: auto;
 }
 
diff --git a/core/themes/claro/css/components/system-status-counter.css b/core/themes/claro/css/components/system-status-counter.css
index 75de812031..55ae34596f 100644
--- a/core/themes/claro/css/components/system-status-counter.css
+++ b/core/themes/claro/css/components/system-status-counter.css
@@ -17,25 +17,25 @@
   width: 100%;
   white-space: nowrap;
   border: 1px solid #e6e4df;
-  border-radius: 3px;
+  border-radius: 0.1875rem;
   background: #fcfcfa;
 }
 
 .system-status-counter__status-icon {
   display: inline-block;
-  width: 60px;
-  height: 60px;
+  width: 3.75rem;
+  height: 3.75rem;
   vertical-align: middle;
   border-right: 1px solid #e6e4df; /* LTR */
   border-left: 0; /* LTR */
   background-color: #faf9f5;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1) inset;
 }
 
 [dir="rtl"] .system-status-counter__status-icon {
   border-right: 0;
   border-left: 1px solid #e6e4df;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1) inset;
 }
 
 .system-status-counter__status-icon:before {
@@ -45,7 +45,7 @@
   content: "";
   background-repeat: no-repeat;
   background-position: 50% center;
-  background-size: 25px;
+  background-size: 1.5625rem;
 }
 
 .system-status-counter__status-icon--error:before {
@@ -62,7 +62,7 @@
 
 .system-status-counter__status-title {
   display: inline-block;
-  padding: 0 6px;
+  padding: 0 0.375rem;
   vertical-align: middle;
   text-transform: uppercase;
   font-size: 1rem;
@@ -72,7 +72,7 @@
 
 .system-status-counter__title-count {
   display: block;
-  margin-bottom: 2px;
+  margin-bottom: 0.125rem;
 }
 
 .system-status-counter__details {
@@ -86,16 +86,16 @@
 @media screen and (min-width: 61em) {
   .system-status-counter__status-icon,
   .system-status-counter {
-    height: 65px;
+    height: 4.0625rem;
   }
   .system-status-counter__status-icon {
-    width: 65px;
+    width: 4.0625rem;
   }
   .system-status-counter__status-title {
-    padding: 10px 3%;
+    padding: 0.625rem 3%;
     font-size: 1rem;
   }
   .system-status-counter__status-icon:before {
-    background-size: 35px;
+    background-size: 2.1875rem;
   }
 }
diff --git a/core/themes/claro/css/components/system-status-report-counters.css b/core/themes/claro/css/components/system-status-report-counters.css
index a67ced4344..636d292dba 100644
--- a/core/themes/claro/css/components/system-status-report-counters.css
+++ b/core/themes/claro/css/components/system-status-report-counters.css
@@ -12,12 +12,12 @@
 
 .system-status-report-counters__item {
   width: 100%;
-  margin: 10px 0;
+  margin: 0.625rem 0;
 }
 
 @media screen and (min-width: 60em) {
   .system-status-report-counters__item {
-    margin-bottom: 20px;
+    margin-bottom: 1.25rem;
   }
   .system-status-report-counters {
     display: flex;
diff --git a/core/themes/claro/css/components/system-status-report-general-info.css b/core/themes/claro/css/components/system-status-report-general-info.css
index 309bf1e642..ee1e5347f2 100644
--- a/core/themes/claro/css/components/system-status-report-general-info.css
+++ b/core/themes/claro/css/components/system-status-report-general-info.css
@@ -12,13 +12,13 @@
 
 .system-status-general-info {
   border: 1px solid #ccc;
-  border-radius: 3px;
+  border-radius: 0.1875rem;
 }
 
 .system-status-general-info__header {
   overflow: hidden;
   margin: 0;
-  padding: 10px;
+  padding: 0.625rem;
   text-transform: uppercase;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
@@ -29,15 +29,15 @@
 .system-status-general-info__item {
   overflow-x: auto;
   box-sizing: border-box;
-  padding: 10px 10px 20px;
+  padding: 0.625rem 0.625rem 1.25rem;
   border-top: 1px solid #ccc;
   background: #fcfcfa;
 }
 
 .system-status-general-info__item-icon {
   display: inline-block;
-  width: 45px;
-  height: 45px;
+  width: 2.8125rem;
+  height: 2.8125rem;
   vertical-align: top;
 }
 
@@ -48,7 +48,7 @@
   content: "";
   background-repeat: no-repeat;
   background-position: 50% center;
-  background-size: 35px;
+  background-size: 2.1875rem;
 }
 
 .system-status-general-info__item-icon--drupal:before {
@@ -65,29 +65,29 @@
 
 .system-status-general-info__item-icon--php:before {
   background-image: url("data:image/svg+xml,%3csvg height='33.447' viewBox='0 0 66 33.447' width='66' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23ccc'%3e%3cpath d='m49.5 12.255h-2.7l-1.473 7h2.4c1.59 0 2.773-.342 3.55-.94.78-.6 1.304-1.62 1.577-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.498-.51-2.996-.51z'/%3e%3cpath d='m33 0c-18.225 0-33 7.488-33 16.724s14.775 16.724 33 16.724 33-7.488 33-16.724-14.775-16.724-33-16.724zm-9.328 19.982c-.787.737-1.662 1.376-2.625 1.69-.963.313-2.19.583-3.68.583h-3.377l-.935 5h-3.945l3.52-18h7.584c2.28 0 3.946.34 4.992 1.537s1.36 2.74.944 4.885c-.172.884-.462 1.628-.87 2.36-.413.732-.947 1.338-1.608 1.945zm11.51 2.273 1.558-8.124c.177-.91.112-1.29-.196-1.62s-.962-.255-1.963-.255h-3.126l-2.016 10h-3.913l3.52-18h3.912l-.935 5h3.486c2.193 0 3.706.124 4.54.888.832.765 1.08 1.99.748 3.703l-1.637 8.41h-3.977zm21.747-6.708c-.173.884-.463 1.692-.872 2.424-.41.734-.944 1.404-1.605 2.01-.787.738-1.662 1.377-2.625 1.69-.963.314-2.19.584-3.68.584h-3.377l-.934 5h-3.944l3.518-18h7.584c2.282 0 3.946.34 4.992 1.537 1.046 1.2 1.36 2.61.943 4.757z'/%3e%3cpath d='m18.72 12.255h-2.703l-1.473 7h2.4c1.59 0 2.773-.342 3.552-.94.778-.6 1.303-1.62 1.576-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.497-.51-2.996-.51z'/%3e%3c/g%3e%3c/svg%3e");
-  background-size: 45px;
+  background-size: 2.8125rem;
 }
 
 .system-status-general-info__item-icon--database:before {
   background-image: url("data:image/svg+xml,%3csvg height='44.262' viewBox='0 0 38.847 44.262' width='38.847' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23ccc'%3e%3cpath d='m19.745 0c5.74.123 12.272.953 16.9 4.668 1.865 1.498 2.786 3.91 1.597 6.126-1.255 2.34-4.13 3.733-6.518 4.6-5.63 2.04-12.113 2.38-18.014 1.573-2.92-.4-5.91-1.103-8.58-2.374-2.19-1.04-4.74-2.805-5.093-5.403-.532-3.925 4.23-6.23 7.264-7.3 3.986-1.408 8.239-1.853 12.444-1.89 4.302.092-3.334.03 0 0z'/%3e%3cpath d='m6.76 17.5c3.702 1.427 7.65 1.972 11.6 2.09 4.058.12 8.107-.424 12.023-1.523 4.227-1.186 7.227-3.624 8.463-6.145v5.965c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.135-.626-2.21-.626-3.486v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z'/%3e%3cpath d='m6.76 26.436c3.702 1.428 7.65 1.973 11.6 2.09 4.058.12 8.107-.423 12.023-1.522 4.227-1.186 7.227-3.624 8.463-6.145v5.964c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.135-.626-2.21-.626-3.486v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z'/%3e%3cpath d='m6.76 35.374c3.702 1.428 7.65 1.973 11.6 2.09 4.058.12 8.107-.423 12.023-1.522 4.227-1.186 7.227-3.624 8.463-6.145v5.965c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.134-.626-2.21-.626-3.485v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z'/%3e%3c/g%3e%3c/svg%3e");
-  background-size: 30px;
+  background-size: 1.875rem;
 }
 
 .system-status-general-info__item-details {
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  width: calc(100% - 60px);
-  padding-left: 10px; /* LTR */
+  width: calc(100% - 3.75rem);
+  padding-left: 0.625rem; /* LTR */
 }
 
 [dir="rtl"] .system-status-general-info__item-details {
-  padding-right: 10px;
+  padding-right: 0.625rem;
   padding-left: 0;
 }
 
 .system-status-general-info__item-title {
-  margin-top: 10px;
+  margin-top: 0.625rem;
   margin-bottom: 0;
   font-size: 1.231em;
 }
@@ -140,20 +140,20 @@
   }
 
   .system-status-general-info__run-cron {
-    margin: 15px 0 5px;
+    margin: 0.9375rem 0 0.3125rem;
   }
 }
 
 @media screen and (min-width: 60em) {
   .system-status-general-info__item-icon {
-    width: 55px;
-    height: 55px;
+    width: 3.4375rem;
+    height: 3.4375rem;
   }
   .system-status-general-info__item-icon:before {
-    background-size: 35px;
+    background-size: 2.1875rem;
   }
   .system-status-general-info__item-icon--php:before {
-    background-size: 55px;
+    background-size: 3.4375rem;
   }
 
   .system-status-general-info__run-cron {
@@ -173,7 +173,7 @@
     display: none;
   }
   .system-status-general-info {
-    margin-top: 25px;
+    margin-top: 1.5625rem;
     border-top: 0;
   }
 }
diff --git a/core/themes/claro/css/components/system-status-report.css b/core/themes/claro/css/components/system-status-report.css
index 3e569c085e..3be13f782d 100644
--- a/core/themes/claro/css/components/system-status-report.css
+++ b/core/themes/claro/css/components/system-status-report.css
@@ -11,7 +11,7 @@
  */
 
 .system-status-report__requirements-group {
-  padding-top: 20px;
+  padding-top: 1.25rem;
 }
 
 .system-status-report__entry {
@@ -32,8 +32,8 @@
 }
 
 .system-status-report__entry h3 {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
   font-size: 1.231em;
 }
 
@@ -97,11 +97,11 @@
 .details .system-status-report__status-icon:before {
   position: absolute;
   top: 1em;
-  left: 10px; /* LTR */
+  left: 0.625rem; /* LTR */
   display: inline-block;
-  width: 16px;
-  height: 16px;
-  margin-right: 10px; /* LTR */
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.625rem; /* LTR */
   content: "";
   vertical-align: top;
   background-repeat: no-repeat;
@@ -111,7 +111,7 @@
 
 [dir="rtl"] .system-status-report__status-title .details-title:before,
 [dir="rtl"].details .system-status-report__status-title:before {
-  right: 10px;
+  right: 0.625rem;
   left: auto;
   margin-right: 0;
 }
@@ -165,7 +165,7 @@
   }
   .collapse-processed > .system-status-report__status-title:before {
     position: relative;
-    top: 3px;
+    top: 0.1875rem;
   }
   .system-status-report__entry__value {
     display: block;
diff --git a/core/themes/claro/css/components/table--file-multiple-widget.css b/core/themes/claro/css/components/table--file-multiple-widget.css
index 299640b97e..539c812555 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.css
@@ -91,7 +91,7 @@
  */
 
 .file-operations-cell {
-  width: 1px;
+  width: 0.0625rem;
   white-space: nowrap; /* Don't let ajax-progress be broken into a new line. */
 }
 
diff --git a/core/themes/claro/css/components/tabledrag.css b/core/themes/claro/css/components/tabledrag.css
index f83d21132f..5c0d6ef865 100644
--- a/core/themes/claro/css/components/tabledrag.css
+++ b/core/themes/claro/css/components/tabledrag.css
@@ -160,9 +160,9 @@ body.drag {
   height: 2rem; /* Hande svg height + its vertical padding */
   margin: 0 -0.5rem -2rem; /* Bottom: handle height as negative value. */
   content: "";
-  border-radius: 2px;
+  border-radius: 0.125rem;
   outline: 2px dotted transparent;
-  box-shadow: 0 0 0 3px #26a769;
+  box-shadow: 0 0 0 0.1875rem #26a769;
 }
 
 /* Disabled tabledrag handle. */
@@ -223,7 +223,7 @@ body.drag {
  */
 
 .tabledrag-cell--only-drag {
-  width: 1px; /* This forces this cell to use the smallest possible width. */
+  width: 0.0625rem; /* This forces this cell to use the smallest possible width. */
   padding-right: 0; /* LTR */
 }
 
diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css
index da617a597e..5c6700d4df 100644
--- a/core/themes/claro/css/components/tables.css
+++ b/core/themes/claro/css/components/tables.css
@@ -233,7 +233,7 @@ th.is-disabled.is-disabled {
 /* Force browsers to calculate the width of a 'select all' <th> element. */
 
 th.select-all {
-  width: 1px;
+  width: 0.0625rem;
 }
 
 /**
diff --git a/core/themes/claro/css/components/tabs.css b/core/themes/claro/css/components/tabs.css
index 8dc8824681..a8539d0bab 100644
--- a/core/themes/claro/css/components/tabs.css
+++ b/core/themes/claro/css/components/tabs.css
@@ -25,8 +25,8 @@
   width: 100%;
   margin: 0 0 1.5rem 0;
   border: 1px solid #d4d4d8;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 0.125rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
 }
 
 [dir="rtl"] .tabs {
@@ -49,7 +49,7 @@
   display: flex;
   justify-content: space-between;
   background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
 }
 
 .tabs__link {
@@ -67,19 +67,19 @@
 }
 
 .tabs__link:focus {
-  min-height: calc(3rem + 2px);
-  margin: -1px;
-  padding-left: calc(1.5rem - 2px); /* LTR */
+  min-height: calc(3rem + 0.125rem);
+  margin: -0.0625rem;
+  padding-left: calc(1.5rem - 0.125rem); /* LTR */
   text-decoration: none;
   color: #545560;
   border: 3px solid #26a769;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   outline: none;
   box-shadow: none;
 }
 
 [dir="rtl"] .tabs__link:focus {
-  padding-right: calc(1.5rem - 2px);
+  padding-right: calc(1.5rem - 0.125rem);
   padding-left: 1.5rem;
 }
 
@@ -95,7 +95,7 @@
 }
 
 .tabs__link.is-active:focus {
-  margin: -1px 0;
+  margin: -0.0625rem 0;
   padding-right: 1.5rem;
   padding-left: 1.5rem;
   border-left: none; /* LTR */
@@ -126,20 +126,20 @@
 
 .tabs__tab.is-active::before {
   z-index: 2;
-  top: -1px;
-  left: -1px; /* LTR */
-  width: 3px;
-  height: calc(100% + 2px);
+  top: -0.0625rem;
+  left: -0.0625rem; /* LTR */
+  width: 0.1875rem;
+  height: calc(100% + 0.125rem);
   border-left: 3px solid #003cc5; /* LTR */
   border-top-left-radius: 2px; /* LTR */
 }
 
 [dir="rtl"] .tabs__tab.is-active::before {
-  right: -1px;
+  right: -0.0625rem;
   left: auto;
   border-right: 3px solid #003cc5;
   border-left: none;
-  border-radius: 0 2px 0 2px;
+  border-radius: 0 0.125rem 0 0.125rem;
 }
 
 .tabs.is-open .tabs__tab.is-active::before {
@@ -151,8 +151,8 @@
 }
 
 .tabs__tab.is-active:focus::before {
-  top: -3px;
-  height: calc(3rem + 2px);
+  top: -0.1875rem;
+  height: calc(3rem + 0.125rem);
 }
 
 .tabs__tab:not(.is-active) {
@@ -173,7 +173,7 @@
   align-items: center;
   justify-content: center;
   width: 3rem;
-  padding-right: 1px;
+  padding-right: 0.0625rem;
   text-align: center;
   border-left: 1px solid rgba(216, 217, 224, 0.8); /* LTR */
 }
@@ -186,7 +186,7 @@
 .tabs__trigger:focus {
   padding-right: 0;
   border: 3px solid #26a769;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   box-shadow: none;
 }
 
@@ -204,8 +204,8 @@
 
   .is-horizontal .tabs--secondary {
     overflow: hidden;
-    margin: -6px -6px 0;
-    padding: 6px 6px 0;
+    margin: -0.375rem -0.375rem 0;
+    padding: 0.375rem 0.375rem 0;
     border-radius: 0;
   }
 
@@ -260,7 +260,7 @@
   .is-horizontal .tabs__link {
     padding-right: 2rem;
     padding-left: 2rem;
-    border-radius: 2px 2px 0 0;
+    border-radius: 0.125rem 0.125rem 0 0;
   }
 
   .is-horizontal .tabs__link:focus {
@@ -270,15 +270,15 @@
     padding-left: 2rem;
     color: #222330;
     border: none;
-    border-radius: 2px 2px 0 0;
+    border-radius: 0.125rem 0.125rem 0 0;
     outline: 2px dotted transparent;
-    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+    box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769;
   }
   [dir="rtl"] .is-horizontal .tabs__link:focus {
     border: none;
   }
   .is-horizontal .tabs--primary .tabs__link:focus {
-    box-shadow: 0 0 0 2px #f3f4f9, 0 0 0 5px #26a769;
+    box-shadow: 0 0 0 0.125rem #f3f4f9, 0 0 0 0.3125rem #26a769;
   }
 
   .is-horizontal .tabs__link:hover {
@@ -292,7 +292,7 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 3px;
+    height: 0.1875rem;
     border-right: none;
     border-bottom: 3px solid #003cc5;
     border-left: none;
diff --git a/core/themes/claro/css/components/tour.theme.css b/core/themes/claro/css/components/tour.theme.css
index b28f97dd77..cdad084fa1 100644
--- a/core/themes/claro/css/components/tour.theme.css
+++ b/core/themes/claro/css/components/tour.theme.css
@@ -14,14 +14,14 @@
 
 .joyride-tip-guide {
   color: #fff;
-  border-radius: 5px;
+  border-radius: 0.3125rem;
   background: #000;
   background: rgba(0, 0, 0, 0.8);
 }
 
 /* Mobile */
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 47.9375rem) {
   .joyride-tip-guide {
     border-radius: 0;
   }
diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css
index 6cd8d3a600..6e3a678693 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -62,13 +62,13 @@
 
 .vertical-tabs__menu-item {
   overflow: hidden;
-  margin: -1rem -1px -0.5rem -0.5rem; /* LTR */
+  margin: -1rem -0.0625rem -0.5rem -0.5rem; /* LTR */
   padding: 0.5rem 0 0.5rem 0.5rem; /* LTR */
 }
 
 [dir="rtl"] .vertical-tabs__menu-item {
   margin-right: -0.5rem;
-  margin-left: -1px;
+  margin-left: -0.0625rem;
   padding-right: 0.5rem;
   padding-left: 0;
 }
@@ -84,7 +84,7 @@
   z-index: 1; /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
   display: block;
   width: 100%;
-  margin-top: -1px;
+  margin-top: -0.0625rem;
   border-top: 1px solid #d4d4d8;
 }
 
@@ -136,8 +136,8 @@
 .vertical-tabs__menu-link {
   position: relative;
   display: block;
-  margin-top: -1px;
-  padding: 0.75rem 0.75rem 0.75rem calc(1.5rem - 4px); /* LTR */
+  margin-top: -0.0625rem;
+  padding: 0.75rem 0.75rem 0.75rem calc(1.5rem - 0.25rem); /* LTR */
   text-decoration: none;
   word-wrap: break-word;
   -webkit-hyphens: auto;
@@ -145,15 +145,15 @@
   hyphens: auto;
   color: #222330;
   border: 1px solid transparent;
-  border-width: 1px 0 1px 4px; /* LTR */
-  border-radius: 2px 0 0 2px; /* LTR */
+  border-width: 0.0625rem 0 0.0625rem 0.25rem; /* LTR */
+  border-radius: 0.125rem 0 0 0.125rem; /* LTR */
 }
 
 [dir="rtl"] .vertical-tabs__menu-link {
-  padding-right: calc(1.5rem - 4px);
+  padding-right: calc(1.5rem - 0.25rem);
   padding-left: 0.75rem;
-  border-width: 1px 4px 1px 0;
-  border-radius: 0 2px 2px 0;
+  border-width: 0.0625rem 0.25rem 0.0625rem 0;
+  border-radius: 0 0.125rem 0.125rem 0;
 }
 
 @media screen and (-ms-high-contrast: active) {
@@ -180,17 +180,17 @@
 .vertical-tabs__menu-link::before {
   position: absolute;
   z-index: 0; /* This should be on a lower level than the menu-item separator lines. */
-  top: -1px;
+  top: -0.0625rem;
   right: 0; /* LTR */
-  bottom: -1px;
-  left: -4px; /* LTR */
+  bottom: -0.0625rem;
+  left: -0.25rem; /* LTR */
   content: "";
   pointer-events: none;
   background-clip: padding-box;
 }
 
 [dir="rtl"] .vertical-tabs__menu-link::before {
-  right: -4px;
+  right: -0.25rem;
   left: 0;
 }
 
@@ -204,11 +204,11 @@
   right: 0;
   bottom: 0;
   left: 0;
-  margin: -1px -4px;
+  margin: -0.0625rem -0.25rem;
   content: "";
   pointer-events: none;
   border: 3px solid #26a769;
-  border-radius: 2px;
+  border-radius: 0.125rem;
 }
 
 .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
@@ -216,7 +216,7 @@
   color: #003cc5;
   border-color: rgba(216, 217, 224, 0.8) transparent;
   background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
 }
 
 .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover {
@@ -227,13 +227,13 @@
 .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
   z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
   border-left: 4px solid #003cc5; /* LTR */
-  border-radius: 2px 0 0 2px; /* LTR */
+  border-radius: 0.125rem 0 0 0.125rem; /* LTR */
 }
 
 [dir=rtl] .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
   border-right: 4px solid #003cc5;
   border-left: 0;
-  border-radius: 0 2px 2px 0;
+  border-radius: 0 0.125rem 0.125rem 0;
 }
 
 .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover::before {
@@ -280,9 +280,9 @@
   margin-bottom: 0.75rem;
   color: #222330;
   border: 1px solid rgba(216, 217, 224, 0.8);
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
 }
 
 /* This modifier is added by JavaScript (this is inherited from Drupal core). */
@@ -290,7 +290,7 @@
 .vertical-tabs__items--processed {
   position: relative;
   z-index: 1; /* The wrapper of the details of the vertical tabs should be on a higher level than the vertical tabs menu */
-  top: -1px;
+  top: -0.0625rem;
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -326,7 +326,7 @@
 
 .vertical-tabs__item {
   /* Render on top of the border of vertical-tabs__items. */
-  margin: -1px -1px 0;
+  margin: -0.0625rem -0.0625rem 0;
   border-radius: 0;
 }
 
@@ -336,7 +336,7 @@
 }
 
 .vertical-tabs__item--last {
-  margin-bottom: -1px;
+  margin-bottom: -0.0625rem;
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
 }
diff --git a/core/themes/claro/css/components/views-exposed-form.css b/core/themes/claro/css/components/views-exposed-form.css
index db206efb91..cd1b7d365b 100644
--- a/core/themes/claro/css/components/views-exposed-form.css
+++ b/core/themes/claro/css/components/views-exposed-form.css
@@ -32,9 +32,9 @@
   margin-bottom: 1.5rem;
   padding: 0.5rem 1.5rem 1.5rem 1.5rem;
   border: 1px solid rgba(216, 217, 224, 0.8);
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
 }
 
 .views-exposed-form__item.views-exposed-form__item {
diff --git a/core/themes/claro/css/components/views-ui.css b/core/themes/claro/css/components/views-ui.css
index b0feba0d5c..78b4477dc4 100644
--- a/core/themes/claro/css/components/views-ui.css
+++ b/core/themes/claro/css/components/views-ui.css
@@ -78,14 +78,14 @@ details.fieldset-no-legend {
 .form-item-options-expose-required,
 .form-item-options-expose-label,
 .form-item-options-expose-description {
-  margin-top: 6px;
-  margin-bottom: 6px;
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
 }
 
 .views-admin-dependent .form-type-radio,
 .views-admin-dependent .form-radios .form-item {
-  margin-top: 2px;
-  margin-bottom: 2px;
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
 }
 
 /* @end */
@@ -101,7 +101,7 @@ details.fieldset-no-legend {
 .views-displays ul.secondary li a,
 .views-displays ul.secondary li.is-active a,
 .views-displays ul.secondary li.is-active a.is-active {
-  padding: 2px 7px 3px;
+  padding: 0.125rem 0.4375rem 0.1875rem;
 }
 
 .views-displays ul.secondary li a {
@@ -122,11 +122,11 @@ details.fieldset-no-legend {
 }
 
 .views-admin .button .links li {
-  padding-right: 12px; /* LTR */
+  padding-right: 0.75rem; /* LTR */
 }
 
 [dir="rtl"] .views-admin .button .links li {
-  padding-left: 12px;
+  padding-left: 0.75rem;
 }
 
 .views-display-top ul.secondary {
@@ -173,7 +173,7 @@ details.fieldset-no-legend {
 
 .views-tabs {
   overflow: visible;
-  margin: 0 200px 0 0; /* LTR */
+  margin: 0 12.5rem 0 0; /* LTR */
   padding: 0;
   list-style: none;
   text-align: left; /* LTR */
@@ -182,7 +182,7 @@ details.fieldset-no-legend {
 
 [dir="rtl"] .views-tabs {
   margin-right: 0;
-  margin-left: 200px;
+  margin-left: 12.5rem;
   text-align: right;
 }
 
@@ -214,7 +214,7 @@ details.fieldset-no-legend {
 .views-tabs .action-list {
   position: absolute;
   z-index: 50;
-  top: 23px;
+  top: 1.4375rem;
   left: 0; /* LTR */
   margin: 0;
 }
@@ -229,11 +229,11 @@ details.fieldset-no-legend {
 }
 
 .views-tab a:hover > .icon.add {
-  background-position: center -25px;
+  background-position: center -1.5625rem;
 }
 
 .views-tab .open > a {
-  border-radius: 7px 7px 0 0;
+  border-radius: 0.4375rem 0.4375rem 0 0;
 }
 
 .views-tab .open > a:hover,
@@ -243,15 +243,15 @@ details.fieldset-no-legend {
 }
 
 .views-tab .action-list li:first-child {
-  border-radius: 0 7px 0 0; /* LTR */
+  border-radius: 0 0.4375rem 0 0; /* LTR */
 }
 
 [dir="rtl"] .views-tab .action-list li:first-child {
-  border-radius: 7px 0 0 0;
+  border-radius: 0.4375rem 0 0 0;
 }
 
 .views-tab .action-list li:last-child {
-  border-radius: 0 0 7px 7px;
+  border-radius: 0 0 0.4375rem 0.4375rem;
 }
 
 .views-tab .action-list input.form-submit {
@@ -271,12 +271,12 @@ details.fieldset-no-legend {
 }
 
 .views-tabs li {
-  margin: 0 5px 5px 6px; /* LTR */
+  margin: 0 0.3125rem 0.3125rem 0.375rem; /* LTR */
 }
 
 [dir="rtl"] .views-tabs li {
-  margin-right: 6px;
-  margin-left: 5px;
+  margin-right: 0.375rem;
+  margin-left: 0.3125rem;
 }
 
 .views-tabs li + li {
@@ -294,9 +294,9 @@ details.fieldset-no-legend {
 
 .views-tabs a {
   display: inline-block;
-  padding: 3px 7px;
+  padding: 0.1875rem 0.4375rem;
   border: 1px solid #cbcbcb;
-  border-radius: 7px;
+  border-radius: 0.4375rem;
   font-size: small;
   line-height: 1.3333;
 }
@@ -305,7 +305,7 @@ details.fieldset-no-legend {
 
 .views-tabs li.is-active a.is-active.error,
 .views-tabs .error {
-  padding: 1px 6px;
+  padding: 0.0625rem 0.375rem;
   border: 2px solid #ed541d;
 }
 
@@ -337,23 +337,23 @@ details.fieldset-no-legend {
 }
 
 .views-tabs .action-list li {
-  padding: 2px 9px;
-  border-width: 0 1px;
+  padding: 0.125rem 0.5625rem;
+  border-width: 0 0.0625rem;
   border-style: solid;
   border-color: #cbcbcb;
   background-color: #f1f1f1;
 }
 
 .views-tabs .action-list li:first-child {
-  border-width: 1px 1px 0;
+  border-width: 0.0625rem 0.0625rem 0;
 }
 
 .views-displays .action-list li:last-child {
-  border-width: 0 1px 1px;
+  border-width: 0 0.0625rem 0.0625rem;
 }
 
 .views-tabs .action-list li:last-child {
-  border-width: 0 1px 1px;
+  border-width: 0 0.0625rem 0.0625rem;
 }
 
 .views-tabs .action-list input.form-submit {
@@ -372,11 +372,11 @@ details.fieldset-no-legend {
 }
 
 .views-tabs a:hover > .icon.add {
-  background-position: center -25px;
+  background-position: center -1.5625rem;
 }
 
 .views-tabs .open a:hover > .icon.add {
-  background-position: center 3px;
+  background-position: center 0.1875rem;
 }
 
 /* @end */
@@ -391,15 +391,15 @@ details.fieldset-no-legend {
 }
 
 .views-ui-display-tab-bucket .links {
-  padding: 2px 6px 4px;
+  padding: 0.125rem 0.375rem 0.25rem;
 }
 
 .views-ui-display-tab-bucket .links li + li {
-  margin-left: 3px; /* LTR */
+  margin-left: 0.1875rem; /* LTR */
 }
 
 [dir="rtl"] .views-ui-display-tab-bucket .links li + li {
-  margin-right: 3px;
+  margin-right: 0.1875rem;
   margin-left: 0;
 }
 
@@ -461,9 +461,9 @@ details.fieldset-no-legend {
 /* @group Query info table */
 
 .views-query-info table {
-  border-radius: 7px;
-  -webkit-border-horizontal-spacing: 1px;
-  -webkit-border-vertical-spacing: 1px;
+  border-radius: 0.4375rem;
+  -webkit-border-horizontal-spacing: 0.0625rem;
+  -webkit-border-vertical-spacing: 0.0625rem;
 }
 
 .views-query-info table tr td:last-child {
@@ -485,7 +485,7 @@ details.fieldset-no-legend {
 
 .form-item-page-create,
 .form-item-block-create {
-  margin-top: 13px;
+  margin-top: 0.8125rem;
 }
 
 /* @end */
@@ -496,15 +496,15 @@ details.fieldset-no-legend {
  */
 
 .filterable-option .form-item.form-type-checkbox {
-  padding-top: 4px;
+  padding-top: 0.25rem;
   /* This selector is aggressive because Claro's reset for .form-items is aggressive. */
-  padding-bottom: 4px;
-  padding-left: 4px; /* LTR */
+  padding-bottom: 0.25rem;
+  padding-left: 0.25rem; /* LTR */
 }
 
 [dir="rtl"] .filterable-option .form-item.form-type-checkbox {
-  padding-right: 4px;
-  padding-left: 8px;
+  padding-right: 0.25rem;
+  padding-left: 0.5rem;
 }
 
 /* @end */
diff --git a/core/themes/claro/css/layout/layout.css b/core/themes/claro/css/layout/layout.css
index e1b1ef8f2d..f0f878b539 100644
--- a/core/themes/claro/css/layout/layout.css
+++ b/core/themes/claro/css/layout/layout.css
@@ -11,7 +11,7 @@
 
 .page-content {
   margin-top: 1.5rem;
-  margin-bottom: 80px;
+  margin-bottom: 5rem;
 }
 
 @media screen and (min-width: 38em) {
diff --git a/core/themes/claro/css/layout/node-add.css b/core/themes/claro/css/layout/node-add.css
index 72e32c4fbe..ad7c368ab2 100644
--- a/core/themes/claro/css/layout/node-add.css
+++ b/core/themes/claro/css/layout/node-add.css
@@ -24,7 +24,7 @@
  */
 
 @media
-  screen and (min-width: 780px), (orientation: landscape) and (min-device-height: 780px) {
+  screen and (min-width: 48.75rem), (orientation: landscape) and (min-device-height: 48.75rem) {
   .layout-region-node-footer__content {
     margin-top: 0.5em;
   }
diff --git a/core/themes/claro/css/theme/ckeditor-dialog.css b/core/themes/claro/css/theme/ckeditor-dialog.css
index 143579bde3..ff36449d61 100644
--- a/core/themes/claro/css/theme/ckeditor-dialog.css
+++ b/core/themes/claro/css/theme/ckeditor-dialog.css
@@ -44,7 +44,7 @@
 /* Dialog's header. */
 
 .cke_reset_all .cke_dialog_title {
-  padding: 15px 49px 15px 15px;
+  padding: 0.9375rem 3.0625rem 0.9375rem 0.9375rem;
   color: #fff;
   border: 0;
   border-top-left-radius: 5px;
@@ -59,23 +59,23 @@
 }
 
 [dir="rtl"] .cke_reset_all .cke_dialog_title {
-  padding: 15px 15px 15px 49px;
+  padding: 0.9375rem 0.9375rem 0.9375rem 3.0625rem;
 }
 
 /* More specificity to prevent overriding in high density screens. */
 
 .cke_reset_all .cke_dialog .cke_dialog_close_button {
-  top: 16px;
-  right: 20px;
-  width: 16px;
-  height: 16px;
+  top: 1rem;
+  right: 1.25rem;
+  width: 1rem;
+  height: 1rem;
   opacity: 1;
   background: url("data:image/svg+xml,%3csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z' fill='%23fff'/%3e%3c/svg%3e") 0 0 no-repeat;
 }
 
 [dir="rtl"] .cke_reset_all .cke_dialog .cke_dialog_close_button {
   right: auto;
-  left: 20px;
+  left: 1.25rem;
 }
 
 .cke_reset_all .cke_dialog .cke_label {
@@ -101,7 +101,7 @@
 [dir="rtl"] .cke_reset_all .cke_dialog_ui_hbox_first,
 [dir="rtl"] .cke_reset_all .cke_dialog_ui_hbox_child {
   padding-right: 0;
-  padding-left: 10px;
+  padding-left: 0.625rem;
 }
 
 .cke_reset_all .cke_dialog_body label {
@@ -122,15 +122,15 @@
 .cke_reset_all select.cke_dialog_ui_input_select {
   box-sizing: border-box;
   max-width: 100%;
-  margin: 0 0 3px;
+  margin: 0 0 0.1875rem;
   padding: 0.3em 0.4em 0.3em 0.5em;
   transition: border linear 0.2s, box-shadow linear 0.2s;
   color: #595959;
   border: 1px solid #b8b8b8;
   border-top-color: #999;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background: #fcfcfa;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.125);
   font-size: 1em;
   line-height: normal;
 }
@@ -146,14 +146,14 @@
   border-color: #40b6ff;
   outline: 0;
   background-color: #fff;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;
+  box-shadow: inset 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), 0 0 0.5rem #40b6ff;
 }
 
 /* Dialog's footer. */
 
 .cke_reset_all .cke_dialog .cke_dialog_footer {
   margin: 0;
-  padding: 15px 20px;
+  padding: 0.9375rem 1.25rem;
   text-align: left;
   border: 0;
   border-bottom-right-radius: 5px;
@@ -187,7 +187,7 @@
   display: inline-block;
   box-sizing: border-box;
   margin-right: 1em;
-  padding: 4px 1.5em;
+  padding: 0.25rem 1.5em;
   cursor: pointer;
   transition: all 0.1s;
   text-align: center;
@@ -197,7 +197,7 @@
   border-radius: 20em;
   background-color: #f2f1eb;
   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
-  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+  text-shadow: 0 0.0625rem hsla(0, 0%, 100%, 0.6);
   font-size: 14px;
   font-size: 0.875rem;
   font-weight: 600;
@@ -216,13 +216,13 @@
 
 .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:hover,
 .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus {
-  padding: 4px 1.5em;
+  padding: 0.25rem 1.5em;
   text-decoration: none;
   color: #1a1a1a;
   border: 1px solid #a6a6a6;
   background-color: #f9f8f6;
   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
-  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
+  box-shadow: 0 0.0625rem 0.125rem hsla(0, 0%, 0%, 0.125);
 }
 
 .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus {
@@ -232,17 +232,17 @@
 }
 
 .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:active {
-  padding: 4px 1.5em;
+  padding: 0.25rem 1.5em;
   transition: none;
   border: 1px solid #a6a6a6;
   background-color: #dfdfd9;
   background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);
-  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+  box-shadow: inset 0 0.0625rem 0.1875rem hsla(0, 0%, 0%, 0.2);
 }
 
 .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button span {
   padding: 0;
-  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+  text-shadow: 0 0.0625rem hsla(0, 0%, 100%, 0.6);
   font-size: 0.875rem;
   line-height: normal;
 }
@@ -258,7 +258,7 @@
   border-color: #1e5c90;
   background-color: #0071b8;
   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
-  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+  text-shadow: 0 0.0625rem hsla(0, 0%, 0%, 0.5);
   font-weight: 700;
   -webkit-font-smoothing: antialiased;
 }
@@ -269,7 +269,7 @@
   border-color: #1e5c90;
   background-color: #2369a6;
   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
-  box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
+  box-shadow: 0 0.0625rem 0.125rem hsla(203, 10%, 10%, 0.25);
 }
 
 .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:focus {
@@ -280,9 +280,9 @@
 .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok:active {
   border-color: #144b78;
   background-image: linear-gradient(to bottom, #08639b, #0071b8);
-  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+  box-shadow: inset 0 0.0625rem 0.1875rem hsla(0, 0%, 0%, 0.2);
 }
 
 .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button_ok span {
-  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+  text-shadow: 0 0.0625rem hsla(0, 0%, 0%, 0.5);
 }
diff --git a/core/themes/claro/css/theme/ckeditor-editor.css b/core/themes/claro/css/theme/ckeditor-editor.css
index bb3dc4abe8..f599040a9e 100644
--- a/core/themes/claro/css/theme/ckeditor-editor.css
+++ b/core/themes/claro/css/theme/ckeditor-editor.css
@@ -13,11 +13,11 @@
   /* Inner border radius must be based on chrome border radius and size. */
 }
 .cke.cke_chrome {
-  border-width: 1px;
-  border-radius: 2px;
+  border-width: 0.0625rem;
+  border-radius: 0.125rem;
 }
 .cke .cke_inner {
-  border-radius: 1px;
+  border-radius: 0.0625rem;
 }
 .cke_path_empty:only-child::after {
   position: absolute;
@@ -31,7 +31,7 @@
 .cke .cke_top {
   border: 1px solid transparent;
   border-bottom: 0;
-  border-radius: 1px 1px 0 0;
+  border-radius: 0.0625rem 0.0625rem 0 0;
 }
 .cke .cke_contents {
   border: 1px solid transparent;
@@ -41,7 +41,7 @@
 .cke .cke_bottom {
   border: 1px solid transparent;
   border-top: 0;
-  border-radius: 0 0 1px 1px;
+  border-radius: 0 0 0.0625rem 0.0625rem;
 }
 /* Default */
 .cke.cke_chrome {
@@ -57,7 +57,7 @@
 /* Focus. */
 .cke.cke_chrome.cke_focus {
   outline: 2px dotted transparent;
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #26a769;
 }
 /* Error. */
 .error + .cke.cke_chrome,
diff --git a/core/themes/claro/css/theme/ckeditor-frame.css b/core/themes/claro/css/theme/ckeditor-frame.css
index fa25f18fd7..c54d3dec59 100644
--- a/core/themes/claro/css/theme/ckeditor-frame.css
+++ b/core/themes/claro/css/theme/ckeditor-frame.css
@@ -11,5 +11,5 @@
  */
 
 .cke_editable:not(.cke_editable_inline) {
-  margin: 1em calc(1em - 2px);
+  margin: 1em calc(1em - 0.125rem);
 }
diff --git a/core/themes/claro/css/theme/field-ui.admin.css b/core/themes/claro/css/theme/field-ui.admin.css
index b3d5e3b07d..67cd1f4ee7 100644
--- a/core/themes/claro/css/theme/field-ui.admin.css
+++ b/core/themes/claro/css/theme/field-ui.admin.css
@@ -54,7 +54,7 @@
 .field-plugin-settings-edit {
   width: 1rem;
   margin: 0;
-  padding: 1px 8px;
+  padding: 0.0625rem 0.5rem;
 }
 
 .field-plugin-settings-edit-wrapper .ajax-progress--throbber {
diff --git a/core/themes/claro/css/theme/filter.theme.css b/core/themes/claro/css/theme/filter.theme.css
index 3917904e4e..656a64c81b 100644
--- a/core/themes/claro/css/theme/filter.theme.css
+++ b/core/themes/claro/css/theme/filter.theme.css
@@ -22,7 +22,7 @@
   vertical-align: top;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 37.5rem) {
   /* Leave editor's select auto-scaled. */
   .form-element.form-element--editor-format {
     width: auto;
diff --git a/core/themes/claro/css/theme/install-page.css b/core/themes/claro/css/theme/install-page.css
index 7e3a6f957a..830f5b3051 100644
--- a/core/themes/claro/css/theme/install-page.css
+++ b/core/themes/claro/css/theme/install-page.css
@@ -42,7 +42,7 @@
   color: #595959;
   font-size: 0.5em;
 }
-@media all and (max-width: 1010px) and (min-width: 48em) {
+@media all and (max-width: 63.125rem) and (min-width: 48em) {
   .install-page .password-strength,
   .install-page .confirm-parent {
     width: 100%;
diff --git a/core/themes/claro/css/theme/maintenance-page.css b/core/themes/claro/css/theme/maintenance-page.css
index 53dba2a1f2..167911f18f 100644
--- a/core/themes/claro/css/theme/maintenance-page.css
+++ b/core/themes/claro/css/theme/maintenance-page.css
@@ -124,7 +124,7 @@
 @media all and (max-width: 48em) { /* 768px */
   .layout-container {
     margin: 1.25em;
-    padding: 10px 20px;
+    padding: 0.625rem 1.25rem;
   }
   .page-title {
     margin-right: 2em; /* LTR */
@@ -155,11 +155,11 @@
   }
   .layout-container {
     width: 75%;
-    max-width: 770px;
+    max-width: 48.125rem;
     margin: 0 auto;
-    padding: 20px 0 40px 0;
-    border-radius: 5px;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    padding: 1.25rem 0 2.5rem 0;
+    border-radius: 0.3125rem;
+    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.15);
   }
 
   /* Positioning sidebar & content */
@@ -176,7 +176,7 @@
   }
   ul {
     margin: 0.25em 0;
-    padding: 15px;
+    padding: 0.9375rem;
   }
   [dir="rtl"] ul {
     margin-right: 0; /* Overrides default [dir="rtl"] ul margin */
diff --git a/core/themes/claro/css/theme/media-library.css b/core/themes/claro/css/theme/media-library.css
index b6564f5fec..06fc3a4330 100644
--- a/core/themes/claro/css/theme/media-library.css
+++ b/core/themes/claro/css/theme/media-library.css
@@ -23,7 +23,7 @@
 
 .media-library-menu {
   display: block;
-  width: 600px;
+  width: 37.5rem;
   max-width: 20%;
   margin: 0; /* LTR */
   padding: 0;
@@ -51,11 +51,11 @@
   position: relative;
   display: block;
   box-sizing: border-box;
-  padding: 15px;
+  padding: 0.9375rem;
   text-decoration: none;
   border-bottom: 1px solid #b3b2ad;
   background-color: #f2f2f0;
-  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+  text-shadow: 0 0.0625rem hsla(0, 0%, 100%, 0.6);
 }
 
 .media-library-menu__link:active,
@@ -72,17 +72,17 @@
 
 .media-library-menu__link.active {
   z-index: 1;
-  margin-right: -1px; /* LTR */
+  margin-right: -0.0625rem; /* LTR */
   color: #000;
   border-right: 1px solid #fcfcfa; /* LTR */
   border-bottom: 1px solid #b3b2ad;
   background-color: #fff;
-  box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
+  box-shadow: 0 0.3125rem 0.3125rem -0.3125rem hsla(0, 0%, 0%, 0.3);
 }
 
 [dir="rtl"] .media-library-menu__link.active {
   margin-right: 0;
-  margin-left: -1px;
+  margin-left: -0.0625rem;
   border-right: 0;
   border-left: 1px solid #fcfcfa;
 }
@@ -119,9 +119,9 @@
 }
 
 .media-library-add-form__input-wrapper {
-  padding: 16px;
+  padding: 1rem;
   border: 1px solid #bfbfbf;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   background: #fcfcfa;
 }
 
@@ -132,7 +132,7 @@
 }
 
 .media-library-add-form .file-upload-help {
-  margin: 8px 0 0;
+  margin: 0.5rem 0 0;
 }
 
 /* Style the media add oEmbed form. */
@@ -174,11 +174,11 @@
 /* Change to padding to account for the negative margin for flex grid. */
 
 .media-library-add-form__selected-media .details-wrapper {
-  padding: 0 10px 1em 10px;
+  padding: 0 0.625rem 1em 0.625rem;
 }
 
 .media-library-add-form__selected-media .media-library-item .field--name-thumbnail img {
-  height: 100px;
+  height: 6.25rem;
 }
 
 /* Generic media library view styles. */
@@ -186,15 +186,15 @@
 .media-library-select-all {
   flex-basis: 100%;
   width: 100%;
-  margin: 10px 8px;
+  margin: 0.625rem 0.5rem;
 }
 
 .media-library-select-all input {
-  margin-right: 10px;
+  margin-right: 0.625rem;
 }
 
 [dir="rtl"] .media-library-select-all input {
-  margin-left: 10px;
+  margin-left: 0.625rem;
 }
 
 .media-library-views-form,
@@ -215,14 +215,14 @@
 }
 
 .media-library-views-form__header .form-item {
-  margin-right: 8px; /* @TODO RTL? */
+  margin-right: 0.5rem; /* @TODO RTL? */
 }
 
 .media-library-views-form__rows {
   display: flex;
   flex-wrap: wrap;
   flex-basis: 100%;
-  margin: 0 -8px;
+  margin: 0 -0.5rem;
 }
 
 /**
@@ -263,14 +263,14 @@
 
 .media-library-wrapper .views-display-link {
   margin: 0;
-  padding-left: 22px; /* LTR */
+  padding-left: 1.375rem; /* LTR */
   color: #333;
   font-size: 0.9375rem;
   line-height: 1rem;
 }
 
 [dir="rtl"] .media-library-wrapper .views-display-link {
-  padding-right: 22px;
+  padding-right: 1.375rem;
   padding-left: 0;
 }
 
@@ -279,7 +279,7 @@
 }
 
 .media-library-wrapper .views-display-link-widget {
-  margin-right: 15px;
+  margin-right: 0.9375rem;
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23333333' d='M10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3A1.5 1.5 0 0 1 10.5 9zm-8 0h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3A1.5 1.5 0 0 1 2.5 9zm8-8h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3A1.5 1.5 0 0 1 10.5 1zm-8 0h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3A1.5 1.5 0 0 1 2.5 1z'/%3e%3c/svg%3e") left 0 no-repeat; /* LTR */
 }
 
@@ -313,7 +313,7 @@
   justify-content: center;
   box-sizing: border-box;
   width: 50%;
-  padding: 8px;
+  padding: 0.5rem;
   vertical-align: top;
   outline: none;
   background: #fff;
@@ -321,10 +321,10 @@
 
 .media-library-item--grid:before {
   position: absolute;
-  top: 7px;
-  left: 7px;
-  width: calc(100% - 16px);
-  height: calc(100% - 16px);
+  top: 0.4375rem;
+  left: 0.4375rem;
+  width: calc(100% - 1rem);
+  height: calc(100% - 1rem);
   content: "";
   transition: border-color 0.2s, color 0.2s, background 0.2s;
   pointer-events: none;
@@ -419,7 +419,7 @@
 }
 
 .media-library-item--grid .field--name-thumbnail img {
-  height: 180px;
+  height: 11.25rem;
   -o-object-fit: contain;
   object-fit: contain;
   -o-object-position: center center;
@@ -429,11 +429,11 @@
 .media-library-item--grid.is-hover:before,
 .media-library-item--grid.checked:before,
 .media-library-item--grid.is-focus:before {
-  top: 5px;
-  left: 5px;
-  border-width: 3px;
+  top: 0.3125rem;
+  left: 0.3125rem;
+  border-width: 0.1875rem;
   border-color: #40b6ff;
-  border-radius: 3px;
+  border-radius: 0.1875rem;
 }
 
 .media-library-item--grid.checked:before {
@@ -443,19 +443,19 @@
 .media-library-item__click-to-select-checkbox {
   position: absolute;
   z-index: 1;
-  top: 16px;
-  left: 16px; /* LTR */
+  top: 1rem;
+  left: 1rem; /* LTR */
   display: block;
 }
 
 [dir="rtl"] .media-library-item__click-to-select-checkbox {
-  right: 16px;
+  right: 1rem;
   left: auto;
 }
 
 .media-library-item__click-to-select-checkbox input {
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .media-library-item__click-to-select-checkbox .form-item {
@@ -471,14 +471,14 @@
 /* Media library item table styles. */
 
 .media-library-item--table img {
-  max-width: 100px;
+  max-width: 6.25rem;
   height: auto;
 }
 
 /* Media library entity view display styles. */
 
 .media-library-item__preview {
-  padding-bottom: 34px;
+  padding-bottom: 2.125rem;
 }
 
 .field--widget-media-library-widget .media-library-item__preview {
@@ -491,9 +491,9 @@
 
 .media-library-item__status {
   position: absolute;
-  top: 40px;
-  left: 5px; /* LTR */
-  padding: 5px 10px;
+  top: 2.5rem;
+  left: 0.3125rem; /* LTR */
+  padding: 0.3125rem 0.625rem;
   pointer-events: none;
   color: #e4e4e4;
   background: #666;
@@ -502,7 +502,7 @@
 }
 
 [dir="rtl"] .media-library-item__status {
-  right: 5px;
+  right: 0.3125rem;
   left: auto;
 }
 
@@ -511,9 +511,9 @@
   bottom: 0;
   display: block;
   overflow: hidden;
-  max-width: calc(100% - 10px);
-  max-height: calc(100% - 50px);
-  padding: 5px;
+  max-width: calc(100% - 0.625rem);
+  max-height: calc(100% - 3.125rem);
+  padding: 0.3125rem;
   background: white;
 }
 
@@ -524,7 +524,7 @@
 .media-library-item__name {
   display: block;
   overflow: hidden;
-  margin: 2px;
+  margin: 0.125rem;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -568,19 +568,19 @@
 
 .media-library-widget__toggle-weight {
   position: absolute;
-  top: 5px;
-  right: 5px; /* LTR */
+  top: 0.3125rem;
+  right: 0.3125rem; /* LTR */
 }
 
 [dir="rtl"] .media-library-widget__toggle-weight {
   right: auto;
-  left: 5px;
+  left: 0.3125rem;
 }
 
 /* Add negative margin for flex grid. */
 
 .media-library-selection {
-  margin: 1em -8px;
+  margin: 1em -0.5rem;
 }
 
 /**
@@ -604,42 +604,42 @@
 .media-library-item__remove.button:focus {
   position: absolute;
   z-index: 1;
-  top: 10px;
+  top: 0.625rem;
   overflow: hidden;
-  width: 21px;
-  height: 21px;
-  margin: 5px;
+  width: 1.3125rem;
+  height: 1.3125rem;
+  margin: 0.3125rem;
   padding: 0;
   transition: 0.2s border-color;
   color: transparent;
   border: 2px solid #ccc;
-  border-radius: 20px;
-  background-size: 13px;
+  border-radius: 1.25rem;
+  background-size: 0.8125rem;
   text-shadow: none;
   font-size: 0;
 }
 
 .media-library-item__edit {
-  right: 40px; /* LTR */
+  right: 2.5rem; /* LTR */
 }
 
 [dir="rtl"] .media-library-item__edit {
   right: auto;
-  left: 40px;
+  left: 2.5rem;
 }
 
 .media-library-item__remove {
-  right: 10px; /* LTR */
+  right: 0.625rem; /* LTR */
 }
 
 [dir="rtl"] .media-library-item__remove {
   right: auto;
-  left: 10px;
+  left: 0.625rem;
 }
 
 .media-library-item__edit {
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23787878' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23787878' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e") #fff center no-repeat;
-  background-size: 13px;
+  background-size: 0.8125rem;
 }
 
 .media-library-item__remove,
@@ -650,7 +650,7 @@
 .media-library-item__remove.button:hover,
 .media-library-item__remove.button:focus {
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e") #fff center no-repeat;
-  background-size: 13px;
+  background-size: 0.8125rem;
 }
 
 .media-library-item__edit:hover,
@@ -693,7 +693,7 @@
  */
 
 .media-library-add-form__media:first-child .media-library-add-form__remove-button[type="submit"] {
-  top: 5px;
+  top: 0.3125rem;
 }
 
 /* Do not show the bottom border and padding for the last item. */
@@ -707,14 +707,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 220px;
-  margin-right: 20px; /* LTR */
+  width: 13.75rem;
+  margin-right: 1.25rem; /* LTR */
   background: #ebebeb;
 }
 
 [dir="rtl"] .media-library-add-form__preview {
   margin-right: 0;
-  margin-left: 20px;
+  margin-left: 1.25rem;
 }
 
 .media-library-add-form__fields {
@@ -728,14 +728,14 @@
 
 .media-library-add-form__remove-button[type="submit"] {
   position: absolute;
-  top: 25px;
-  right: 6px;
+  top: 1.5625rem;
+  right: 0.375rem;
   margin-right: 0;
 }
 
 [dir="rtl"] .media-library-add-form__remove-button[type="submit"] {
   right: auto;
-  left: 13px;
+  left: 0.8125rem;
   margin-left: 0;
 }
 
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.css b/core/themes/claro/css/theme/views_ui.admin.theme.css
index a84c6d331b..d68aeb883b 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.css
@@ -22,17 +22,17 @@
 }
 
 .box-padding {
-  padding-right: 12px;
-  padding-left: 12px;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
 }
 
 .box-margin {
-  margin: 12px 12px 0 12px;
+  margin: 0.75rem 0.75rem 0 0.75rem;
 }
 
 .views-admin .icon {
-  width: 16px;
-  height: 16px;
+  width: 1rem;
+  height: 1rem;
 }
 
 .views-admin .icon,
@@ -50,14 +50,14 @@
 
 .views-admin a.icon {
   border: 1px solid #ddd;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset;
 }
 
 .views-admin a.icon:hover {
   border-color: #d0d0d0;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3333) inset;
+  box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.3333) inset;
 }
 
 .views-admin a.icon:active {
@@ -76,71 +76,71 @@
 .views-admin .icon.compact {
   display: block;
   overflow: hidden;
-  text-indent: -9999px;
+  text-indent: -624.9375rem;
   direction: ltr;
 }
 
 /* Targets any element with an icon -> text combo */
 
 .views-admin .icon-text {
-  padding-left: 19px; /* LTR */
+  padding-left: 1.1875rem; /* LTR */
 }
 
 [dir="rtl"] .views-admin .icon-text {
-  padding-right: 19px;
+  padding-right: 1.1875rem;
   padding-left: 0;
 }
 
 .views-admin .icon.linked {
-  background-position: center -153px;
+  background-position: center -9.5625rem;
 }
 
 .views-admin .icon.unlinked {
-  background-position: center -195px;
+  background-position: center -12.1875rem;
 }
 
 .views-admin .icon.add {
-  background-position: center 3px;
+  background-position: center 0.1875rem;
 }
 
 .views-admin a.icon.add {
-  background-position: center 3px, left top; /* LTR */
+  background-position: center 0.1875rem, left top; /* LTR */
 }
 
 [dir="rtl"] .views-admin a.icon.add {
-  background-position: center 3px, right top;
+  background-position: center 0.1875rem, right top;
 }
 
 .views-admin .icon.delete {
-  background-position: center -52px;
+  background-position: center -3.25rem;
 }
 
 .views-admin a.icon.delete {
-  background-position: center -52px, left top; /* LTR */
+  background-position: center -3.25rem, left top; /* LTR */
 }
 
 [dir="rtl"] .views-admin a.icon.delete {
-  background-position: center -52px, right top;
+  background-position: center -3.25rem, right top;
 }
 
 .views-admin .icon.rearrange {
-  background-position: center -111px;
+  background-position: center -6.9375rem;
 }
 
 .views-admin a.icon.rearrange {
-  background-position: center -111px, left top; /* LTR */
+  background-position: center -6.9375rem, left top; /* LTR */
 }
 
 [dir="rtl"] .views-admin a.icon.rearrange {
-  background-position: center -111px, right top;
+  background-position: center -6.9375rem, right top;
 }
 
 .views-displays .tabs a:hover > .icon.add {
-  background-position: center -25px;
+  background-position: center -1.5625rem;
 }
 
 .views-displays .tabs .open a:hover > .icon.add {
-  background-position: center 3px;
+  background-position: center 0.1875rem;
 }
 
 details.box-padding {
@@ -152,13 +152,13 @@ details.box-padding {
 }
 
 .form-item {
-  margin-top: 9px;
+  margin-top: 0.5625rem;
   padding-top: 0;
   padding-bottom: 0;
 }
 
 .form-type-checkbox {
-  margin-top: 6px;
+  margin-top: 0.375rem;
 }
 
 .form-checkbox,
@@ -167,18 +167,18 @@ details.box-padding {
 }
 
 .container-inline {
-  padding-top: 15px;
-  padding-bottom: 15px;
+  padding-top: 0.9375rem;
+  padding-bottom: 0.9375rem;
 }
 
 .container-inline > * + *,
 .container-inline .details-wrapper > * + * {
-  padding-left: 4px; /* LTR */
+  padding-left: 0.25rem; /* LTR */
 }
 
 [dir="rtl"] .container-inline > * + *,
 [dir="rtl"] .container-inline .details-wrapper > * + * {
-  padding-right: 4px;
+  padding-right: 0.25rem;
   padding-left: 0;
 }
 
@@ -195,11 +195,11 @@ details.box-padding {
 /* Indent form elements so they're directly underneath the label of the checkbox that reveals them */
 
 .views-admin .form-type-checkbox + .form-wrapper {
-  margin-left: 16px; /* LTR */
+  margin-left: 1rem; /* LTR */
 }
 
 [dir="rtl"] .views-admin .form-type-checkbox + .form-wrapper {
-  margin-right: 16px;
+  margin-right: 1rem;
   margin-left: 0;
 }
 
@@ -217,8 +217,8 @@ details.box-padding {
 }
 
 .views-admin-dependent .form-item {
-  margin-top: 6px;
-  margin-bottom: 6px;
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
 }
 
 .views-ui-view-name h3 {
@@ -227,11 +227,11 @@ details.box-padding {
 }
 
 .view-changed {
-  margin-bottom: 21px;
+  margin-bottom: 1.3125rem;
 }
 
 .views-admin .unit-title {
-  margin-top: 18px;
+  margin-top: 1.125rem;
   margin-bottom: 0;
   font-size: 0.9375rem;
   line-height: 1.6154;
@@ -286,7 +286,7 @@ details.box-padding {
 
 .form-item-page-create,
 .form-item-block-create {
-  margin-top: 13px;
+  margin-top: 0.8125rem;
 }
 
 .form-item-page-create label,
@@ -324,7 +324,7 @@ td.group-title {
 .views-ui-dialog td.group-title span {
   display: block;
   overflow: hidden;
-  height: 1px;
+  height: 0.0625rem;
 }
 
 .group-message .form-submit,
@@ -355,25 +355,25 @@ td.group-title {
 .grouped-description,
 .exposed-description {
   float: left; /* LTR */
-  padding-top: 3px;
-  padding-right: 10px; /* LTR */
+  padding-top: 0.1875rem;
+  padding-right: 0.625rem; /* LTR */
 }
 
 [dir="rtl"] .grouped-description,
 [dir="rtl"] .exposed-description {
   float: right;
   padding-right: 0;
-  padding-left: 10px;
+  padding-left: 0.625rem;
 }
 
 .views-displays {
-  padding-bottom: 36px;
+  padding-bottom: 2.25rem;
   border: 1px solid #ccc;
 }
 
 .views-display-top {
   position: relative;
-  padding: 8px 8px 3px;
+  padding: 0.5rem 0.5rem 0.1875rem;
   border-bottom: 1px solid #ccc;
   background-color: #e1e2dc;
 }
@@ -388,13 +388,13 @@ td.group-title {
 }
 
 .views-display-top .tabs > li {
-  margin-right: 6px; /* LTR */
+  margin-right: 0.375rem; /* LTR */
   padding-left: 0; /* LTR */
 }
 
 [dir="rtl"] .views-display-top .tabs > li {
   margin-right: 0.3em;
-  margin-left: 6px;
+  margin-left: 0.375rem;
   padding-right: 0;
 }
 
@@ -409,7 +409,7 @@ td.group-title {
 
 .form-edit .form-actions {
   margin-top: 0;
-  padding: 8px 12px;
+  padding: 0.5rem 0.75rem;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   border-left: 1px solid #ccc;
@@ -417,13 +417,13 @@ td.group-title {
 }
 
 .views-displays .tabs.secondary {
-  margin-right: 200px; /* LTR */
+  margin-right: 12.5rem; /* LTR */
   border: 0;
 }
 
 [dir="rtl"] .views-displays .tabs.secondary {
   margin-right: 0;
-  margin-left: 200px;
+  margin-left: 12.5rem;
 }
 
 .views-displays .tabs.secondary li,
@@ -439,12 +439,12 @@ td.group-title {
 }
 
 .views-displays .tabs.secondary li {
-  margin: 0 5px 5px 6px; /* LTR */
+  margin: 0 0.3125rem 0.3125rem 0.375rem; /* LTR */
 }
 
 [dir="rtl"] .views-displays .tabs.secondary li {
-  margin-right: 6px;
-  margin-left: 5px;
+  margin-right: 0.375rem;
+  margin-left: 0.3125rem;
 }
 
 .views-displays .tabs.secondary .tabs__tab + .tabs__tab {
@@ -462,9 +462,9 @@ td.group-title {
 
 .views-displays .tabs.secondary a {
   display: inline-block;
-  padding: 3px 7px;
+  padding: 0.1875rem 0.4375rem;
   border: 1px solid #cbcbcb;
-  border-radius: 7px;
+  border-radius: 0.4375rem;
   font-size: small;
   line-height: 1.3333;
 }
@@ -473,7 +473,7 @@ td.group-title {
 
 .views-displays .tabs li.is-active a.is-active.error,
 .views-displays .tabs .error {
-  padding: 1px 6px;
+  padding: 0.0625rem 0.375rem;
   border: 2px solid #ed541d;
 }
 
@@ -504,23 +504,23 @@ td.group-title {
 }
 
 .views-displays .tabs .action-list li {
-  padding: 2px 9px;
-  border-width: 0 1px;
+  padding: 0.125rem 0.5625rem;
+  border-width: 0 0.0625rem;
   border-style: solid;
   border-color: #cbcbcb;
   background-color: #f1f1f1;
 }
 
 .views-displays .tabs .action-list li:first-child {
-  border-width: 1px 1px 0;
+  border-width: 0.0625rem 0.0625rem 0;
 }
 
 .views-displays .action-list li:last-child {
-  border-width: 0 1px 1px;
+  border-width: 0 0.0625rem 0.0625rem;
 }
 
 .views-displays .tabs .action-list li:last-child {
-  border-width: 0 1px 1px;
+  border-width: 0 0.0625rem 0.0625rem;
 }
 
 .views-displays .tabs .action-list input.form-submit {
@@ -539,14 +539,14 @@ td.group-title {
 }
 
 .edit-display-settings {
-  margin: 12px 12px 0 12px;
+  margin: 0.75rem 0.75rem 0 0.75rem;
 }
 
 .edit-display-settings-top.views-ui-display-tab-bucket {
   position: relative;
-  margin: 0 0 15px 0;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  margin: 0 0 0.9375rem 0;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
   border: 1px solid #f3f3f3;
   line-height: 1.25rem;
 }
@@ -561,7 +561,7 @@ td.group-title {
 
 .view-preview-form .form-item-view-args,
 .view-preview-form .form-actions {
-  margin-top: 5px;
+  margin-top: 0.3125rem;
 }
 
 .view-preview-form .arguments-preview {
@@ -570,12 +570,12 @@ td.group-title {
 
 .view-preview-form .arguments-preview,
 .view-preview-form .form-item-view-args {
-  margin-left: 10px; /* LTR */
+  margin-left: 0.625rem; /* LTR */
 }
 
 [dir="rtl"] .view-preview-form .arguments-preview,
 [dir="rtl"] .view-preview-form .form-item-view-args {
-  margin-right: 10px;
+  margin-right: 0.625rem;
   margin-left: 0;
 }
 
@@ -614,7 +614,7 @@ td.group-title {
 .views-ui-display-tab-bucket {
   position: relative;
   margin: 0;
-  padding-top: 4px;
+  padding-top: 0.25rem;
   border-bottom: 1px solid #f3f3f3;
   line-height: 1.25rem;
 }
@@ -629,7 +629,7 @@ td.group-title {
 
 .views-ui-display-tab-bucket__title,
 .views-ui-display-tab-bucket > .views-display-setting {
-  padding: 3px 6px 4px;
+  padding: 0.1875rem 0.375rem 0.25rem;
 }
 
 .views-ui-display-tab-bucket__title {
@@ -675,7 +675,7 @@ td.group-title {
 /* This is each row within one of the "boxes." */
 
 .views-ui-display-tab-bucket .views-display-setting {
-  padding-bottom: 2px;
+  padding-bottom: 0.125rem;
   color: #666;
   font-size: 0.75rem;
 }
@@ -689,27 +689,27 @@ td.group-title {
 }
 
 .views-ui-display-tab-bucket .views-group-text {
-  margin-top: 6px;
-  margin-bottom: 6px;
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
 }
 
 .views-display-setting .label {
-  margin-right: 3px; /* LTR */
+  margin-right: 0.1875rem; /* LTR */
 }
 
 [dir="rtl"] .views-display-setting .label {
   margin-right: 0;
-  margin-left: 3px;
+  margin-left: 0.1875rem;
 }
 
 .views-edit-view {
-  margin-bottom: 15px;
+  margin-bottom: 0.9375rem;
 }
 
 /* The contents of the popup dialog on the views edit form. */
 
 .views-filterable-options .form-type-checkbox {
-  padding: 5px 8px;
+  padding: 0.3125rem 0.5rem;
   border-top: none;
 }
 
@@ -751,7 +751,7 @@ td.group-title {
 }
 
 .views-ui-dialog .views-filterable-options {
-  margin-bottom: 10px;
+  margin-bottom: 0.625rem;
 }
 
 .views-ui-dialog .views-add-form-selected.container-inline {
@@ -764,11 +764,11 @@ td.group-title {
 
 .views-ui-dialog .form-item-selected {
   margin: 0;
-  padding: 6px 16px;
+  padding: 0.375rem 1rem;
 }
 
 .views-ui-dialog .views-override:not(:empty) {
-  padding: 8px 13px;
+  padding: 0.5rem 0.8125rem;
   background-color: #f3f4ee;
 }
 
@@ -825,7 +825,7 @@ td.group-title {
 }
 
 .views-ui-rearrange-filter-form tr td[rowspan] {
-  border-width: 0 1px 1px 1px;
+  border-width: 0 0.0625rem 0.0625rem 0.0625rem;
   border-style: solid;
   border-color: #cdcdcd;
 }
@@ -854,15 +854,15 @@ td.group-title {
 .form-item-options-expose-required,
 .form-item-options-expose-label,
 .form-item-options-expose-description {
-  margin-top: 6px;
-  margin-bottom: 6px;
-  margin-left: 18px; /* LTR */
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+  margin-left: 1.125rem; /* LTR */
 }
 
 [dir="rtl"] .form-item-options-expose-required,
 [dir="rtl"] .form-item-options-expose-label,
 [dir="rtl"] .form-item-options-expose-description {
-  margin-right: 18px;
+  margin-right: 1.125rem;
   margin-left: 0;
 }
 
@@ -876,28 +876,28 @@ td.group-title {
 
 .view-preview-form__title {
   margin-top: 0;
-  padding: 8px 12px;
+  padding: 0.5rem 0.75rem;
   border-bottom: 1px solid #ccc;
   background-color: #e1e2dc;
 }
 
 .view-preview-form .form-item-live-preview {
   position: absolute;
-  top: 3px;
-  right: 12px;
-  margin-top: 2px;
-  margin-left: 2px; /* LTR */
+  top: 0.1875rem;
+  right: 0.75rem;
+  margin-top: 0.125rem;
+  margin-left: 0.125rem; /* LTR */
 }
 
 [dir="rtl"] .view-preview-form .form-item-live-preview {
   right: auto;
-  left: 12px;
-  margin-right: 2px;
+  left: 0.75rem;
+  margin-right: 0.125rem;
   margin-left: 0;
 }
 
 .views-live-preview {
-  padding: 12px;
+  padding: 0.75rem;
 }
 
 .views-live-preview .views-query-info {
@@ -915,27 +915,27 @@ td.group-title {
 }
 
 .views-live-preview .view > * {
-  margin-top: 18px;
+  margin-top: 1.125rem;
 }
 
 .views-live-preview .preview-section {
-  margin: 0 -5px;
-  padding: 3px 5px;
+  margin: 0 -0.3125rem;
+  padding: 0.1875rem 0.3125rem;
   border: 1px dashed #dedede;
 }
 
 .views-live-preview li.views-row + li.views-row {
-  margin-top: 18px;
+  margin-top: 1.125rem;
 }
 
 /* The div.views-row is intentional and excludes li.views-row, for example */
 
 .views-live-preview div.views-row + div.views-row {
-  margin-top: 36px;
+  margin-top: 2.25rem;
 }
 
 .views-query-info table {
-  margin: 10px 0;
+  margin: 0.625rem 0;
   border-spacing: 0;
   border-collapse: separate;
   border-color: #ddd;
@@ -947,47 +947,47 @@ td.group-title {
 
 .views-query-info table th,
 .views-query-info table td {
-  padding: 4px 10px;
+  padding: 0.25rem 0.625rem;
   color: #666;
 }
 
 .messages {
-  margin-bottom: 18px;
+  margin-bottom: 1.125rem;
   line-height: 1.4555;
 }
 
 .js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
   position: absolute;
   z-index: 2;
-  top: -1px;
-  right: -5px; /* LTR */
+  top: -0.0625rem;
+  right: -0.3125rem; /* LTR */
 }
 
 [dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
   right: auto;
-  left: -5px;
+  left: -0.3125rem;
 }
 
 .views-display-top .dropbutton-wrapper {
   position: absolute;
-  top: 5px;
-  right: 4px; /* LTR */
+  top: 0.3125rem;
+  right: 0.25rem; /* LTR */
 }
 
 [dir="rtl"] .views-display-top .dropbutton-wrapper {
   right: auto;
-  left: 4px;
+  left: 0.25rem;
 }
 
 .views-ui-display-tab-bucket .dropbutton-wrapper {
   position: absolute;
-  top: 3px;
-  right: 3px; /* LTR */
+  top: 0.1875rem;
+  right: 0.1875rem; /* LTR */
 }
 
 [dir="rtl"] .views-ui-display-tab-bucket .dropbutton-wrapper {
   right: auto;
-  left: 3px;
+  left: 0.1875rem;
 }
 
 .views-list-section {