add figcaption

assets/css/components/_card-impact-small.scss

@@ -72,7 +72,46 @@
 
         .open-graph__details {
             grid-column: 2;
-            @include details-summary();
+        
+             summary,
+            .summary-inner{
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                gap: 0.5ch;
+            }
+
+            .arrow-details{
+                line-height: 0;
+                --size:  11px;
+                height: var(--size);
+                width: var(--size);
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+                top: -2px;
+            
+                svg{
+                    transition: transform 0.2s ease-in;
+                    width: 100%;
+                    fill: var(--color-txt);
+                }
+                
+            }
+
+            summary:hover{
+                color: var(--color-txt);
+                .arrow-details svg{
+                    fill: var(--color-txt);
+                } 
+            }
+
+            &[open]{
+                .arrow-details svg{
+                    transform: rotate(90deg);
+                } 
+            }
 
             summary {
                 color: var(--color-txt-light);

assets/css/components/_details-summary.scss

@@ -1,46 +1,8 @@
 
 
 
-@mixin details-summary(){
+// @mixin details-summary(){
 
 
-    summary,
-    .summary-inner{
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        gap: 0.5ch;
-    }
-
-    .arrow-details{
-        line-height: 0;
-        --size:  11px;
-        height: var(--size);
-        width: var(--size);
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        top: -2px;
-    
-        svg{
-            transition: transform 0.2s ease-in;
-            width: 100%;
-            fill: var(--color-txt);
-        }
-        
-    }
-
-    summary:hover{
-        color: var(--color-txt);
-        .arrow-details svg{
-            fill: var(--color-txt);
-        } 
-    }
-
-    &[open]{
-        .arrow-details svg{
-            transform: rotate(90deg);
-        } 
-    }
-}
+   
+// }

assets/css/components/_summary-hero.scss

@@ -1,7 +1,8 @@
    #summary__hero{
         width: 100%;
         position: relative;
-       left: 0;
+        left: 0;
+        margin-bottom: calc(var(--spacing)*3);
 
 
         figcaption{
@@ -10,7 +11,9 @@
             @media #{$x-small}{    font-size: var(--fs-xsmall); }
             padding: calc(var(--spacing)*0.5) var(--padding-body);
             padding-bottom: 0;
-                
+            text-align: center;
+            width: var(--max-w-content);
+            margin-inline: auto;
             
         }
 

assets/css/style.css

@@ -611,6 +611,7 @@ button.sort[data-sort-type=up] .arrow {
   width: 100%;
   position: relative;
   left: 0;
+  margin-bottom: calc(var(--spacing) * 3);
 }
 #summary__hero figcaption {
   color: var(--color-txt-light);
@@ -624,6 +625,9 @@ button.sort[data-sort-type=up] .arrow {
 #summary__hero figcaption {
   padding: calc(var(--spacing) * 0.5) var(--padding-body);
   padding-bottom: 0;
+  text-align: center;
+  width: var(--max-w-content);
+  margin-inline: auto;
 }
 #summary__hero figure {
   width: 100%;