support of picture in css

assets/css/components/_figures.scss

@@ -1,6 +1,7 @@
 
 @mixin figure-16-9{
-    figure{
+    & > picture, 
+    & > figure{
         aspect-ratio: 16/9;
         display: flex;
         overflow: hidden;
@@ -17,6 +18,7 @@
 
 
 @mixin figure-3-1(){
+    & > picture,
     & > figure{
         aspect-ratio: 3/1;
         overflow: hidden;
@@ -30,36 +32,33 @@
 
 
 
-@mixin figure-2-1(){
+// @mixin figure-2-1(){
-    figure{
+//     & > picture,
-        aspect-ratio: 2/1;
+//     & > figure{
-        overflow: hidden;
+//         aspect-ratio: 2/1;
-        img{
+//         overflow: hidden;
-            width: 100%;
+//         img{
-            height: 100%;
+//             width: 100%;
-            object-fit: cover;
+//             height: 100%;
-        }
+//             object-fit: cover;
-    }
+//         }
-}
+//     }
+// }
 
+// @mixin figure-16-9-hover{
+//     figure{
+//         aspect-ratio: 16/9;
+//         display: flex;
+//         overflow: hidden;
+//         img{
+//             width: 100%;
+//             height: 100%;
+//             object-fit: cover;
+//             transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
 
-
+//         }
-
+//     }
-
+//     &:hover{
-@mixin figure-16-9-hover{
+//         figure img{  transform: scale(1.05);  }
-    figure{
+//     }
-        aspect-ratio: 16/9;
+// }
-        display: flex;
-        overflow: hidden;
-        img{
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
-
-        }
-    }
-    &:hover{
-        figure img{  transform: scale(1.05);  }
-    }
-}

assets/css/style.css

@@ -1228,12 +1228,12 @@ button.sort[data-sort-type=up] .arrow {
   flex-direction: column;
   padding: var(--padding-inner);
 }
-.card--article figure {
+.card--article > picture, .card--article > figure {
   aspect-ratio: 16/9;
   display: flex;
   overflow: hidden;
 }
-.card--article figure img {
+.card--article > picture img, .card--article > figure img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
@@ -1366,12 +1366,12 @@ button.sort[data-sort-type=up] .arrow {
 .card--article-small.has-link:hover::before {
   border-color: var(--color-txt);
 }
-.card--article-small figure {
+.card--article-small > picture, .card--article-small > figure {
   aspect-ratio: 16/9;
   display: flex;
   overflow: hidden;
 }
-.card--article-small figure img {
+.card--article-small > picture img, .card--article-small > figure img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
@@ -1517,11 +1517,11 @@ button.sort[data-sort-type=up] .arrow {
 .card--impact:hover::before {
   border-color: var(--color-txt);
 }
-.card--impact > figure {
+.card--impact > picture, .card--impact > figure {
   aspect-ratio: 3/1;
   overflow: hidden;
 }
-.card--impact > figure img {
+.card--impact > picture img, .card--impact > figure img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
@@ -1764,12 +1764,12 @@ button.sort[data-sort-type=up] .arrow {
   container-name: cardfolder;
   position: relative;
 }
-.card--folder figure {
+.card--folder > picture, .card--folder > figure {
   aspect-ratio: 16/9;
   display: flex;
   overflow: hidden;
 }
-.card--folder figure img {
+.card--folder > picture img, .card--folder > figure img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
@@ -2838,12 +2838,12 @@ main .page__header .description-medium {
   font-weight: 500;
   text-wrap: balance;
 }
-.report__header figure {
+.report__header > picture, .report__header > figure {
   aspect-ratio: 16/9;
   display: flex;
   overflow: hidden;
 }
-.report__header figure img {
+.report__header > picture img, .report__header > figure img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;