bottom-bar

assets/css/base/_body.scss

@@ -137,7 +137,7 @@ body, #site-header, #site-footer{
 body.menu-open,
 body.is-hidden{
     overflow-y: hidden;
-    main, footer, #nav-highlight, .btn--back-to-top{
+    main, footer, #nav-highlight, .btn--back-to-top, .bottom-bar{
         transition: opacity .3s ease-in;
         opacity: 0.1;
     }

assets/css/components/_bottom-bar.scss

@@ -2,6 +2,7 @@
     position: fixed;
     bottom: 0;
     left: 0;
+      z-index: calc(var(--z-header) - 10);
     height: calc(var(--header-h)*0.75);
     width: 100vw;
     background-color: var(--color-bg);

assets/css/components/_card-impact.scss

@@ -14,7 +14,7 @@
 
 
     @include hover-card-line();
-    @include figure-3-1();
+    @include figure-16-9();
     @include pin();
 
     .title{

assets/css/components/_card-open-graph.scss

@@ -2,6 +2,7 @@
 
      container-type: inline-size;
     container-name: opengraph;
+  z-index: calc(var(--z-header) - 100);
 
     .open-graph__inner{
         @include grid-content();

assets/css/style.css

@@ -144,11 +144,12 @@ body.menu-open,
 body.is-hidden {
   overflow-y: hidden;
 }
-body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight, body.menu-open .btn--back-to-top,
+body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight, body.menu-open .btn--back-to-top, body.menu-open .bottom-bar,
 body.is-hidden main,
 body.is-hidden footer,
 body.is-hidden #nav-highlight,
-body.is-hidden .btn--back-to-top {
+body.is-hidden .btn--back-to-top,
+body.is-hidden .bottom-bar {
   transition: opacity 0.3s ease-in;
   opacity: 0.1;
 }
@@ -1620,7 +1621,8 @@ button.sort[data-sort-type=up] .arrow {
   border-color: var(--color-txt);
 }
 .card--impact > picture, .card--impact > figure {
-  aspect-ratio: 3/1;
+  aspect-ratio: 16/9;
+  display: flex;
   overflow: hidden;
 }
 .card--impact > picture img, .card--impact > figure img {
@@ -1628,6 +1630,7 @@ button.sort[data-sort-type=up] .arrow {
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
+  transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
 }
 .card--impact .pin {
   z-index: 90;
@@ -1870,6 +1873,7 @@ button.sort[data-sort-type=up] .arrow {
 .card--open-graph {
   container-type: inline-size;
   container-name: opengraph;
+  z-index: calc(var(--z-header) - 100);
 }
 .card--open-graph .open-graph__inner {
   display: grid;
@@ -2048,6 +2052,7 @@ button.sort[data-sort-type=up] .arrow {
   position: fixed;
   bottom: 0;
   left: 0;
+  z-index: calc(var(--z-header) - 10);
   height: calc(var(--header-h) * 0.75);
   width: 100vw;
   background-color: var(--color-bg);