diff -u b/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
--- b/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -65,9 +65,9 @@
 }
 
 .claro-details--accordion-item {
+  max-height: 5.625rem;
   overflow: hidden;
-  max-height: 25rem;
-  transition: max-height var(--details-box-shadow-transition-duration) ease-in-out;
+  transition: max-height 1s ease-in-out;
 
   /**
   * CSS3 max-height transitions need a specific height.
diff -u b/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
--- b/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -57,10 +57,10 @@
 }
 
 .claro-details--accordion-item {
+  max-height: 90px;
   overflow: hidden;
-  max-height: 400px;
-  transition: max-height var(--details-box-shadow-transition-duration) ease-in-out;
-
+  transition: max-height 1s ease-in-out;
+  
   /**
   * CSS3 max-height transitions need a specific height.
   * @see http://stackoverflow.com/a/19341648