hover card with bg

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

@@ -46,7 +46,7 @@
     }
 
     &:hover{
-        .title{ text-decoration: underline;}
+        background-color: var(--grey-950);
     }
 
     @include btn--go-to();

assets/css/components/_card-impact.scss

@@ -1,15 +1,24 @@
 .card--impact{
     @include grid-content();
+    // grid-row-gap: 0;
     padding: calc(var(--spacing)*0.5) 0;
     border-bottom: var(--border-light);
+    &:first-of-type{
+        border-top: var(--border-light);
+    }
 
     container-type: inline-size;
     container-name: impact;
 
-    &:first-of-type{
-        border-top: var(--border-light);
+    @include btn--go-to();
+    .btn--go-to{
+        top: calc(var(--padding-inner)*1);
+        bottom: auto;
+
     }
 
+   
+
     .content{
         grid-column: 2;
     }
@@ -26,45 +35,81 @@
       
     }
 
-    .content{
-        .see-more{
-            color: var(--color-txt-light);
+    &:not([data-impact-type="media"]){
+        .content{
+            padding-right: calc(var(--padding-inner)*2.5);
+        }
+       
+    }
+
+    
+
+
+    .investigations{
+        z-index: 10;
+        grid-column: 2;
+        list-style: none;
+        font-size: var(--fs-small);
+    
+        
+        a{
             text-decoration: none;
-            white-space: nowrap;
-            &::after{
-                content: ' +'
+            color: var(--color-txt-light);
+            
+        }
+        .icon{
+            position: relative;
+            top: 2px;
+            svg{
+                width: 14px;
+                height: 14px;
+                fill: var(--color-txt-light);
             }
         }
+        li:hover{
+            a{
+                color: var(--color-txt);
+            }
+            .icon svg{ fill: var(--color-txt); }
+        }
+
+    }
+
+    &.has-link:hover{
+        background-color: var(--grey-950);
     }
 
 
+      
+
+
+
     .open-graph__details{
-        grid-column: span 2;
+        grid-column: 2;
         @include details-summary();
         summary{
             color: var(--color-txt-light);
             .arrow-details svg{ fill: var(--color-txt-light);}
         }
+        @media #{$x-small}{
+            summary{
+                @include grid-content();
+                grid-row-gap: 0;
+                .summary-inner{
+                    grid-column: 2;
+                }
+            }
+            grid-column: 1/3;
+        }
     }
 
 
 
-            .open-graph__details{
-                summary{
-                    @include grid-content();
-                    .summary-inner{
-                        grid-column: 2;
-                       
-                    }
-                }
-        
-            }
+      
             .open-graph__inner{
                 margin-top: calc(var(--spacing)*0.5);
-                margin-bottom: calc(var(--spacing)*1);
-                @media #{$small-up}{
-                    margin-bottom: calc(var(--spacing)*2);
-                }
+                // margin-bottom: calc(var(--spacing)*1);
+               
                 .card--open-graph{
                     margin-bottom: calc(var(--spacing)*0.5);
                 }
@@ -79,4 +124,15 @@
     .date, .content, details{
         font-size: 14px!important;
     }
-}
+}
+
+
+[data-template="impacts"]{
+
+    .card--impact:not([data-impact-type="media"]):hover{
+        background-color: var(--grey-950);
+    }
+
+}
+
+

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

@@ -1,9 +1,7 @@
 .card--open-graph{
 
-
-
     @include grid-content();
-    
+
     border: var(--border-light);
     border-radius: var(--radius-small);
     position: relative;
@@ -11,9 +9,17 @@
     figure{
         grid-column: 1;
         grid-row: 1;
+        width: 100%;
+        height: 100%;
+        img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;  
+        }
+    
     }
 
-    @include figure-16-9();
+    // @include figure-16-9();
     
 
     @media #{$x-small}{
@@ -61,7 +67,7 @@
 
     &:hover{
         border-color: var(--color-txt);
-
+        background-color: var(--grey-950);
     }
 }
 

assets/css/components/_details-summary.scss

@@ -31,6 +31,13 @@
         
     }
 
+    summary:hover{
+        color: var(--color-txt);
+        .arrow-details svg{
+            fill: var(--color-txt);
+        } 
+    }
+
     &[open]{
         .arrow-details svg{
             transform: rotate(90deg);