fixed video bad display

sites/all/themes/gui/perfarttimeline/css/styles.css

@@ -2122,7 +2122,7 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > section.field,
 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > section.field {
   flex: 0 0 auto;
-  max-width: 45%;
+  max-width: calc(49% - 2em);
   margin: 0.5em;
 }
 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > section.field.field-name-field-images,
@@ -2283,6 +2283,17 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
   font-weight: 500;
   font-size: 12px;
 }
+@media (max-width: 500px) {
+  html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > section.field,
+  html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > section.field {
+    max-width: calc(100% - 2em);
+  }
+  html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > section.field.field-name-field-images,
+  html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > section.field.field-name-field-images {
+    flex: 1 1 100%;
+    max-width: 100%;
+  }
+}
 html.no-js body.node-type-performance #block-perfart-perf-prevnext ul.perf-prev-next-btns,
 html.classic-nav body.node-type-performance #block-perfart-perf-prevnext ul.perf-prev-next-btns,
 html.no-js body.node-type-performance #block-perfart-perf-prevnext-bottom ul.perf-prev-next-btns,
@@ -2408,3 +2419,8 @@ body.node-type-document #center #content figcaption,
   width: 250px;
   margin-bottom: 1em;
 }
+.field-type-video-embed-field iframe {
+  max-width: 100%;
+  height: auto;
+  aspect-ratio: 4/3;
+}

sites/all/themes/gui/perfarttimeline/less/styles.less

@@ -923,7 +923,7 @@ html.no-js, html.classic-nav{
           >section.field{
             // outline: 1px solid #036;
             flex:0 0 auto;
-            max-width: 45%;
+            max-width: calc(49% - 2em); // moins padding et margin
             margin:0.5em;
             &.field-name-field-images{
               flex: 1 1 100%;
@@ -944,15 +944,6 @@ html.no-js, html.classic-nav{
             display:block; border:none;
           }
 
-        //   @cel:100px;
-        //   @padd:0;
-        //   .cel(@n){
-        //     width:(@cel* @n) - @padd*2;
-        // /*    background-color:rgba(255,0,0,0.1);*/
-        //     padding:@padd;
-        //     //.bl(1px, rgba(255,0,0,0.1));
-        //   }
-          
           h1.node-title{
             .m(0);
             .fs-perfnode-title;
@@ -965,7 +956,6 @@ html.no-js, html.classic-nav{
             .fs-perfnode-personne;
           }
 
-
           .field-type-textauthor, .field-type-text-long{
             // .cel(4);
             .field-item{
@@ -1077,6 +1067,16 @@ html.no-js, html.classic-nav{
           // .field-type-text-long{
           //   width:400px;
           // }
+
+          @media (max-width:500px) {
+            >section.field{
+              max-width: calc(100% - 2em); // moins padding et margin
+              &.field-name-field-images{
+                flex: 1 1 100%;
+                max-width: 100%;
+              }
+            } 
+          }
         }
 
       }
@@ -1117,3 +1117,10 @@ body.node-type-document, .node-type-document-sonor, .node-type-object, .page-tax
         font-size:12px;
       }
 }  
+
+
+.field-type-video-embed-field iframe{
+  max-width: 100%;
+  height: auto;
+  aspect-ratio: 4/3;
+}