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
@@ -66,8 +66,8 @@
 
 .claro-details--accordion-item {
   overflow: hidden;
-  max-height: 25rem;
-  transition: max-height var(--details-box-shadow-transition-duration) ease-in-out;
+  max-height: 5.625rem;
+  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
@@ -58,9 +58,9 @@
 
 .claro-details--accordion-item {
   overflow: hidden;
-  max-height: 400px;
-  transition: max-height var(--details-box-shadow-transition-duration) ease-in-out;
-
+  max-height: 90px;
+  transition: max-height 1s ease-in-out;
+  
   /**
   * CSS3 max-height transitions need a specific height.
   * @see http://stackoverflow.com/a/19341648