card block small + date lang

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

@@ -0,0 +1,153 @@
+.card--block-small {
+
+    border-bottom: var(--border-light);
+    padding: var(--padding-inner) 0;
+    padding-bottom: calc(var(--spacing)*0.75);
+
+    &:first-of-type {
+        border-top: var(--border-light);
+    }
+
+    @include grid-content();
+    @include hover-card-line();
+
+  
+    .group-top {
+        position: relative;
+        // top: -5px;
+    }
+
+    @include btn--go-to();
+
+    .btn--go-to {
+        top: calc(var(--padding-inner)*1);
+        bottom: auto;
+    }
+
+    .title {
+        grid-column: 2;
+              grid-row: 2;
+        font-size: var(--fs-normal);
+        line-height: var(--leading-title);
+        font-weight: 500;
+        text-transform: uppercase;
+        margin-right: 4ch;
+    }
+
+    .date {
+        font-size: var(--fs-small);
+        grid-column: 2;
+        grid-row: 1;
+        margin-top: 4px;
+    }
+
+    @media #{$small} {
+        display: block;
+        padding-bottom: calc(var(--spacing)*0.5);
+
+         .btn--go-to{
+            top: auto;
+            bottom: calc(var(--padding-inner)*1);
+         }
+
+        .group-top {
+            top: 0px;
+            margin-bottom: calc(var(--spacing)*0.5);
+        }
+
+        .title{
+            margin-bottom: calc(var(--spacing)*0.75);
+            margin-right: 1ch;
+        }
+
+        .date{
+            margin-top: 0px;
+        }
+
+    }
+
+
+}
+
+
+
+
+
+
+
+
+
+
+.card--block-small {
+
+  .card--open-graph {
+        grid-column: 2;
+        z-index: 10;
+    }
+
+    .open-graph__details {
+        grid-column: 2;
+
+        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);
+
+            .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;
+        }
+    }
+}

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

@@ -1,144 +0,0 @@
-
-.card--impact-small {
-
-    border-bottom: var(--border-light);
-    &:first-of-type{
-        border-top: var(--border-light);
-    }
-
-    @include grid-content();
-    padding: var(--padding-inner) 0;
-    padding-bottom: calc(var(--spacing)*0.75);
-
-    &.has-link {
-        @include hover-card-line();
-    }
-
-    @include btn--go-to();
-
-    .btn--go-to {
-        top: calc(var(--padding-inner)*1);
-        bottom: auto;
-    }
-
-    .title {
-        grid-column: 2;
-        font-size: var(--fs-normal);
-        font-weight: 500;
-        text-transform: uppercase;
-        margin-right: 4ch;
-    }
-
-    .date{
-        font-size: var(--fs-small);
-    }
-
-    .card--open-graph {
-        grid-column: 2;
-        z-index: 10;
-    }
-
-    .keywords {
-        grid-column: 2;
-        z-index: 10;
-        @media #{$x-small} { display: none; }
-
-
-    }
-
-        &:not([data-impact-type="media"]) .content, 
-        .keywords {
-            @media #{$x-small} {
-                grid-column: span 2;
-            }
-        }
-
-        .category {
-            width: auto;
-            justify-self: start;
-            position: relative;
-            top: -5px;
-        }
-
-        &:not([data-impact-type="media"]) {
-            .content {
-                padding-right: calc(var(--padding-inner)*2.5);
-                @media #{$x-small} {
-                    padding-right: 0;
-                }
-            }
-
-        }
-
-
-        .open-graph__details {
-            grid-column: 2;
-        
-             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);
-
-                .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;
-            }
-        }
-
-
-
-    
-}
-
-

assets/css/components/_category.scss

@@ -23,6 +23,27 @@
 
 
 
+.type{
+        height: calc(var(--h-block)*0.75);
+    border-radius: var(--radius-small);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1ch;
+    padding-top: 3px;
+
+    font-size: var(--fs-xsmall);
+    line-height: 1;
+    font-weight: 500;
+
+    border: var(--border-medium);
+     background-color: var(--color-bg);
+    color: var(--color-txt-light);
+
+    overflow: hidden;
+    white-space: nowrap;
+}
 
 .page__type{
     

assets/css/components/_investigation-hero.scss

@@ -79,6 +79,7 @@
 
                 .text{
                     color: black;
+                    font-weight: 500;
                     line-height: 1;
                     padding-top: 4px;
                 }

assets/css/partials/_page-aside.scss

@@ -3,7 +3,7 @@
     margin-inline: auto;
    padding-top: calc(var(--spacing)*4);
        @media #{$small} {
-              padding-top: calc(var(--spacing)*2);
+              padding-top: calc(var(--spacing)*3);
          }
 
     .aside__title{

assets/css/partials/_site-footer.scss

@@ -4,7 +4,7 @@
 
 
     background-color: var(--dark);
-        padding: calc(var(--spacing)*2) var(--padding-body);
+    padding: calc(var(--spacing)*2) var(--padding-body) calc(var(--spacing)*1) var(--padding-body);
     z-index: 500;
 
     .site-footer__container {
@@ -36,7 +36,7 @@
             list-style: none;
 
              li {
-                margin-bottom: calc(var(--spacing)*0.5);
+                margin-bottom: calc(var(--spacing)*0.25);
             }
 
             a {
@@ -77,7 +77,6 @@
                 grid-column: 2;
                 grid-row: 2;
                     max-width: 350px;
-                margin-bottom: calc(var(--spacing)*1);
                  display: flex;
                  justify-content: space-between;
                  gap: var(--padding-inner);
@@ -89,7 +88,7 @@
                     }
             }
             .socials{
-                grid-column: 2;
+                grid-column: 1;
                 grid-row: 3;
             }
 
@@ -97,8 +96,8 @@
             .credits {
                 font-size: var(--fs-xsmall);
                  grid-column: 1;
-                grid-row: 3;
-                  
+                grid-row: 4;
+                   margin-top: calc(var(--spacing)*2);
             }
         }
 
@@ -112,23 +111,23 @@
 
         .list-links {
             margin-top: calc(var(--spacing)*1);
-            li {
-                margin-bottom: calc(var(--spacing)*0.5);
-            }
+            // li {
+            //     margin-bottom: calc(var(--spacing)*0.25);
+            // }
 
             .hightlight {
-                margin-top: calc(var(--spacing)*1.5);
+                margin-top: calc(var(--spacing)*0.5);
             }
         }
 
   
 
     .socials {
-        margin-top: calc(var(--spacing)*2);
+        margin-top: calc(var(--spacing)*1);
     }
 
         .credits {
-            margin-top: calc(var(--spacing)*1);
+            margin-top: calc(var(--spacing)*2);
         }
 
 

assets/css/style.css

@@ -672,6 +672,24 @@ button:disabled {
   white-space: nowrap;
 }
 
+.type {
+  height: calc(var(--h-block) * 0.75);
+  border-radius: var(--radius-small);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1ch;
+  padding-top: 3px;
+  font-size: var(--fs-xsmall);
+  line-height: 1;
+  font-weight: 500;
+  border: var(--border-medium);
+  background-color: var(--color-bg);
+  color: var(--color-txt-light);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 .page__type {
   height: calc(var(--h-block) * 1);
   border-radius: var(--radius-small);
@@ -916,6 +934,7 @@ button.sort[data-sort-type=up] .arrow {
 }
 #investigation__hero .player-container #hero-play-video .text {
   color: black;
+  font-weight: 500;
   line-height: 1;
   padding-top: 4px;
 }
@@ -2001,30 +2020,28 @@ button.sort[data-sort-type=up] .arrow {
     width: calc(50% - 13px);
   }
 }
-.card--impact-small {
+.card--block-small {
   border-bottom: var(--border-light);
+  padding: var(--padding-inner) 0;
+  padding-bottom: calc(var(--spacing) * 0.75);
 }
-.card--impact-small:first-of-type {
+.card--block-small:first-of-type {
   border-top: var(--border-light);
 }
-.card--impact-small {
+.card--block-small {
   display: grid;
   grid-gap: var(--padding-inner);
   grid-template-columns: 2fr 3fr;
   position: relative;
-  padding: var(--padding-inner) 0;
-  padding-bottom: calc(var(--spacing) * 0.75);
-}
-.card--impact-small.has-link {
   border-bottom: var(--border-light);
 }
-.card--impact-small.has-link:first-of-type {
+.card--block-small:first-of-type {
   border-top: var(--border-light);
 }
-.card--impact-small.has-link {
+.card--block-small {
   position: relative;
 }
-.card--impact-small.has-link::before {
+.card--block-small::before {
   content: "";
   width: 100%;
   border-top: 1px solid transparent;
@@ -2032,103 +2049,104 @@ button.sort[data-sort-type=up] .arrow {
   top: -1px;
   left: 0;
 }
-.card--impact-small.has-link:hover {
+.card--block-small:hover {
   background-color: var(--grey-950);
   border-color: var(--color-txt);
 }
-.card--impact-small.has-link:hover::before {
+.card--block-small:hover::before {
   border-color: var(--color-txt);
 }
-.card--impact-small {
+.card--block-small .group-top {
   position: relative;
 }
-.card--impact-small .btn--go-to {
+.card--block-small {
+  position: relative;
+}
+.card--block-small .btn--go-to {
   position: absolute;
   right: var(--padding-inner);
   bottom: calc(var(--padding-inner) - 3px);
 }
-.card--impact-small .btn--go-to svg {
+.card--block-small .btn--go-to svg {
   width: 15px;
   height: 15px;
   fill: var(--color-txt);
 }
 @media screen and (max-width: 768px) {
-  .card--impact-small .btn--go-to svg {
+  .card--block-small .btn--go-to svg {
     width: 12px;
     height: 12px;
   }
 }
 @media screen and (max-width: 560px) {
-  .card--impact-small .btn--go-to {
+  .card--block-small .btn--go-to {
     right: calc(var(--padding-inner) * 0.5);
     bottom: calc(var(--padding-inner) * 0.25);
   }
-  .card--impact-small .btn--go-to svg {
+  .card--block-small .btn--go-to svg {
     width: 12px;
     height: 12px;
   }
 }
-.card--impact-small:hover .btn--go-to {
+.card--block-small:hover .btn--go-to {
   animation: wiggle-left 0.8s ease-in-out;
 }
-.card--impact-small .btn--go-to {
+.card--block-small .btn--go-to {
   top: calc(var(--padding-inner) * 1);
   bottom: auto;
 }
-.card--impact-small .title {
+.card--block-small .title {
   grid-column: 2;
+  grid-row: 2;
   font-size: var(--fs-normal);
+  line-height: var(--leading-title);
   font-weight: 500;
   text-transform: uppercase;
   margin-right: 4ch;
 }
-.card--impact-small .date {
+.card--block-small .date {
   font-size: var(--fs-small);
+  grid-column: 2;
+  grid-row: 1;
+  margin-top: 4px;
 }
-.card--impact-small .card--open-graph {
+@media screen and (max-width: 768px) {
+  .card--block-small {
+    display: block;
+    padding-bottom: calc(var(--spacing) * 0.5);
+  }
+  .card--block-small .btn--go-to {
+    top: auto;
+    bottom: calc(var(--padding-inner) * 1);
+  }
+  .card--block-small .group-top {
+    top: 0px;
+    margin-bottom: calc(var(--spacing) * 0.5);
+  }
+  .card--block-small .title {
+    margin-bottom: calc(var(--spacing) * 0.75);
+    margin-right: 1ch;
+  }
+  .card--block-small .date {
+    margin-top:  0px;
+  }
+}
+
+.card--block-small .card--open-graph {
   grid-column: 2;
   z-index: 10;
 }
-.card--impact-small .keywords {
-  grid-column: 2;
-  z-index: 10;
-}
-@media screen and (max-width: 560px) {
-  .card--impact-small .keywords {
-    display: none;
-  }
-}
-@media screen and (max-width: 560px) {
-  .card--impact-small:not([data-impact-type=media]) .content,
-  .card--impact-small .keywords {
-    grid-column: span 2;
-  }
-}
-.card--impact-small .category {
-  width: auto;
-  justify-self: start;
-  position: relative;
-  top: -5px;
-}
-.card--impact-small:not([data-impact-type=media]) .content {
-  padding-right: calc(var(--padding-inner) * 2.5);
-}
-@media screen and (max-width: 560px) {
-  .card--impact-small:not([data-impact-type=media]) .content {
-    padding-right: 0;
-  }
-}
-.card--impact-small .open-graph__details {
+.card--block-small .open-graph__details {
   grid-column: 2;
 }
-.card--impact-small .open-graph__details summary,
-.card--impact-small .open-graph__details .summary-inner {
+.card--block-small .open-graph__details summary,
+.card--block-small .open-graph__details .summary-inner {
   display: flex;
   align-items: center;
   cursor: pointer;
   gap: 0.5ch;
 }
-.card--impact-small .open-graph__details .arrow-details {
+.card--block-small .open-graph__details .arrow-details {
   line-height: 0;
   --size: 11px;
   height: var(--size);
@@ -2139,38 +2157,38 @@ button.sort[data-sort-type=up] .arrow {
   position: relative;
   top: -2px;
 }
-.card--impact-small .open-graph__details .arrow-details svg {
+.card--block-small .open-graph__details .arrow-details svg {
   transition: transform 0.2s ease-in;
   width: 100%;
   fill: var(--color-txt);
 }
-.card--impact-small .open-graph__details summary:hover {
+.card--block-small .open-graph__details summary:hover {
   color: var(--color-txt);
 }
-.card--impact-small .open-graph__details summary:hover .arrow-details svg {
+.card--block-small .open-graph__details summary:hover .arrow-details svg {
   fill: var(--color-txt);
 }
-.card--impact-small .open-graph__details[open] .arrow-details svg {
+.card--block-small .open-graph__details[open] .arrow-details svg {
   transform: rotate(90deg);
 }
-.card--impact-small .open-graph__details summary {
+.card--block-small .open-graph__details summary {
   color: var(--color-txt-light);
 }
-.card--impact-small .open-graph__details summary .arrow-details svg {
+.card--block-small .open-graph__details summary .arrow-details svg {
   fill: var(--color-txt-light);
 }
 @media screen and (max-width: 560px) {
-  .card--impact-small .open-graph__details summary {
+  .card--block-small .open-graph__details summary {
     display: grid;
     grid-gap: var(--padding-inner);
     grid-template-columns: 2fr 3fr;
     position: relative;
     grid-row-gap: 0;
   }
-  .card--impact-small .open-graph__details summary .summary-inner {
+  .card--block-small .open-graph__details summary .summary-inner {
     grid-column: 2;
   }
-  .card--impact-small .open-graph__details {
+  .card--block-small .open-graph__details {
     grid-column: 1/3;
   }
 }
@@ -2778,7 +2796,7 @@ body.menu-open #menu-toggle .close {
 
 #site-footer {
   background-color: var(--dark);
-  padding: calc(var(--spacing) * 2) var(--padding-body);
+  padding: calc(var(--spacing) * 2) var(--padding-body) calc(var(--spacing) * 1) var(--padding-body);
   z-index: 500;
 }
 #site-footer .site-footer__container {
@@ -2799,7 +2817,7 @@ body.menu-open #menu-toggle .close {
   list-style: none;
 }
 #site-footer .list-links ul li {
-  margin-bottom: calc(var(--spacing) * 0.5);
+  margin-bottom: calc(var(--spacing) * 0.25);
 }
 #site-footer .list-links ul a {
   text-decoration: none;
@@ -2829,36 +2847,33 @@ body.menu-open #menu-toggle .close {
     grid-column: 2;
     grid-row: 2;
     max-width: 350px;
-    margin-bottom: calc(var(--spacing) * 1);
     display: flex;
     justify-content: space-between;
     gap: var(--padding-inner);
   }
   #site-footer .site-footer__container .socials {
-    grid-column: 2;
+    grid-column: 1;
     grid-row: 3;
   }
   #site-footer .site-footer__container .credits {
     font-size: var(--fs-xsmall);
     grid-column: 1;
-    grid-row: 3;
+    grid-row: 4;
+    margin-top: calc(var(--spacing) * 2);
   }
 }
 @media screen and (max-width: 768px) {
   #site-footer .list-links {
     margin-top: calc(var(--spacing) * 1);
   }
-  #site-footer .list-links li {
-    margin-bottom: calc(var(--spacing) * 0.5);
-  }
   #site-footer .list-links .hightlight {
-    margin-top: calc(var(--spacing) * 1.5);
+    margin-top: calc(var(--spacing) * 0.5);
   }
   #site-footer .socials {
-    margin-top: calc(var(--spacing) * 2);
+    margin-top: calc(var(--spacing) * 1);
   }
   #site-footer .credits {
-    margin-top: calc(var(--spacing) * 1);
+    margin-top: calc(var(--spacing) * 2);
   }
 }
 @media screen and (max-width: 560px) {
@@ -2955,7 +2970,7 @@ main .page__header .page__description {
 }
 @media screen and (max-width: 768px) {
   .page__aside {
-    padding-top: calc(var(--spacing) * 2);
+    padding-top: calc(var(--spacing) * 3);
   }
 }
 .page__aside .aside__title {

assets/css/style.scss

@@ -24,7 +24,7 @@
 @import "components/card-article";
 @import "components/card-article-small";
 @import "components/card-block";
-@import "components/card-impact-small";
+@import "components/card-block-small";
 // @import "components/card-package";
 @import "components/card-open-graph";
 @import "components/swiper";