diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 312cceb0fd6d..e14045ab6286 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "37.75 kB"
+      "maxSize": "38.0 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 9b9dc82e83c2..0d9f921f0e4c 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -102,6 +102,16 @@ $accordion-icon-transform:                rotate(-180deg) !default;
     background-color: var(--accordion-bg);
     border: var(--accordion-border-width) solid var(--accordion-border-color);
 
+    @media (prefers-reduced-motion: no-preference) {
+      interpolate-size: allow-keywords;
+    }
+
+    &::details-content {
+      block-size: 0;
+      overflow-y: clip;
+      @include transition(content-visibility .2s allow-discrete, block-size .2s);
+    }
+
     &:first-of-type {
       @include border-top-radius(var(--accordion-border-radius));
 
@@ -129,7 +139,11 @@ $accordion-icon-transform:                rotate(-180deg) !default;
 
     // Open state - details[open] applies these styles
     &[open] {
+
       border-color: var(--theme-border, var(--accordion-border-color));
+      &::details-content {
+        block-size: auto;
+      }
 
       > .accordion-header {
         color: var(--theme-text, var(--accordion-active-color));