Refresh: Add final images to news gallery (#15608)

bedrock/mozorg/templates/mozorg/about/includes/m24/news.html

@@ -12,48 +12,77 @@
       <h2 class="m24-c-intro-title">Read the latest Mozilla news &amp; articles</h2>
     </header>
     <div class="m24-c-gallery-container">
-
       {{ gallery_tile(
-        class='m24-l-grid-three-quarters',
+        class='m24-l-grid-three-quarters m24-l-gallery-no-desc',
         image=picture(
-          url="img/m24/todo-27-1.svg",
+          url='img/mozorg/about/m24/news/projects-mobile-1450.jpg',
+          sources=[
+            {
+              'media': '(max-width: 767px)',
+              'srcset': {
+                "img/mozorg/about/m24/news/projects-mobile-375.jpg": "375w",
+                "img/mozorg/about/m24/news/projects-mobile-720.jpg": "720w",
+                "img/mozorg/about/m24/news/projects-mobile-976.jpg": "976w",
+                "img/mozorg/about/m24/news/projects-mobile-1232.jpg": "1232w",
+                "img/mozorg/about/m24/news/projects-mobile-1450.jpg": "1450w",
+              },
+              'sizes': {
+                "default": "calc(100vw - 16px)",
+              },
+            },
+            {
+              'srcset': {
+                "img/mozorg/about/m24/news/projects-desktop-1032.jpg": "1032w",
+                "img/mozorg/about/m24/news/projects-desktop-1953.jpg": "1953w",
+                "img/mozorg/about/m24/news/projects-desktop-2056.jpg": "2056w",
+              },
+              'sizes': {
+                "(min-width: 768px)": "calc(83wv - 24px)",
+                "(min-width: 1312px)": "calc(75vw - 32px)",
+                "(min-width: 1440px)": "1028px",
+                "default": "calc(75vw - 32px)",
+              },
+            },
+          ],
           optional_attributes={
             "loading": "lazy",
-            "alt": "",
-            "width": "1440",
-            "height": "533",
+            'alt': ''
           }
         ),
         title='14 AI projects to watch: Mozilla’s first Builders Accelerator cohort kicks off',
         link_url='#',
         cta_text='Read more'
       ) }}
-    </div>
-    <div class="m24-c-gallery-container">
+
+
       {{ gallery_tile(
-        class='m24-l-grid-third',
+        class='m24-l-grid-five m24-l-gallery-no-desc',
         image=picture(
-          url="img/mozorg/about/m24/rise25-mobile.jpg",
+          url="img/mozorg/about/m24/rise25-mobile-720.jpg",
           sources=[
             {
               'media': '(max-width: 1311px)',
               'srcset': {
-                "img/mozorg/about/m24/rise25-mobile.jpg": "318w",
-                "img/mozorg/about/m24/rise25-mobile-high-res.jpg": "634w",
+                "img/mozorg/about/m24/news/rise25-mobile-375.jpg": "375w",
+                "img/mozorg/about/m24/news/rise25-mobile-720.jpg": "720w",
+                "img/mozorg/about/m24/news/rise25-mobile-976.jpg": "976w",
+                "img/mozorg/about/m24/news/rise25-mobile-1232.jpg": "1232w",
+                "img/mozorg/about/m24/news/rise25-mobile-1450.jpg": "1450w",
               },
               'sizes': {
                 "(min-width: 768px)": "calc(50vw - 32px)",
-                "default": "calc(100vw - 32px)",
+                "default": "calc(100vw - 16px)",
               }
             },
             {
               'srcset': {
-                'img/mozorg/about/m24/news-rise25-4-5.png': '564w',
-                'img/mozorg/about/m24/news-rise25-4-5-high-res.png': '1128w'
+                "img/mozorg/about/m24/news/rise25-desktop-573.jpg": "573w",
+                "img/mozorg/about/m24/news/rise25-desktop-1085.jpg": "1085w",
+                "img/mozorg/about/m24/news/rise25-desktop-1128.jpg": "1128w",
               },
               'sizes': {
-                "(min-width: 1440px)": "448px",
-                "default": "calc(33vw - 32px)",
+                "(min-width: 1440px)": "564px",
+                "default": "calc(41vw - 32px)",
               }
             },
           ],
@@ -68,29 +97,33 @@ <h2 class="m24-c-intro-title">Read the latest Mozilla news &amp; articles</h2>
       ) }}
 
       {{ gallery_tile(
-        class='m24-l-grid-quarter',
+        class='m24-l-grid-third m24-l-gallery-no-desc',
         image=picture(
-          url="img/mozorg/about/m24/chicago-mobile.jpg",
+          url="img/mozorg/about/m24/chicago-mobile-720.jpg",
           sources=[
             {
               'media': '(max-width: 1311px)',
               'srcset': {
-                "img/mozorg/about/m24/chicago-mobile.jpg": "318w",
-                "img/mozorg/about/m24/chicago-mobile-high-res.jpg": "634w",
+                "img/mozorg/about/m24/news/chicago-mobile-375.jpg": "375w",
+                "img/mozorg/about/m24/news/chicago-mobile-720.jpg": "720w",
+                "img/mozorg/about/m24/news/chicago-mobile-976.jpg": "976w",
+                "img/mozorg/about/m24/news/chicago-mobile-1232.jpg": "1232w",
+                "img/mozorg/about/m24/news/chicago-mobile-1450.jpg": "1450w",
               },
               'sizes': {
                 "(min-width: 768px)": "calc(50vw - 32px)",
-                "default": "calc(100vw - 32px)",
-              },
+                "default": "calc(100vw - 16px)",
+              }
             },
             {
               'srcset': {
-                'img/mozorg/about/m24/news-chicago.png': '332w',
-                'img/mozorg/about/m24/news-chicago-high-res.png': '664w'
+                "img/mozorg/about/m24/news/chicago-desktop-434.jpg": "434w",
+                "img/mozorg/about/m24/news/chicago-desktop-868.jpg": "868w",
+                "img/mozorg/about/m24/news/chicago-desktop-896.jpg": "896w",
               },
               'sizes': {
                 "(min-width: 1440px)": "448px",
-                "default": "calc(25vw - 32px)",
+                "default": "calc(33vw - 32px)",
               },
             },
           ],

media/css/m24/gallery.scss

@@ -28,13 +28,24 @@
     flex-direction: column;
     position: relative;
 
+    @media #{$mq-md} {
+        &.m24-l-grid-three-quarters {
+            grid-column: 1 / span 2;
+            margin-left: grid(3);
+        }
+    }
+
     @media #{$mq-xl} {
         grid-column: auto / span 3;
 
         &.m24-l-grid-third {
             grid-column: auto / span 4;
         }
 
+        &.m24-l-grid-five {
+            grid-column: auto / span 5;
+        }
+
         &.m24-l-grid-half {
             grid-column: auto / span 6;
         }
@@ -45,6 +56,7 @@
 
         &.m24-l-grid-three-quarters {
             grid-column: 4 / span 9;
+            margin-left: 0
         }
     }
 }
@@ -59,6 +71,10 @@
     @media #{$mq-lg} {
         font-size: 32px;
     }
+
+    .m24-l-gallery-no-desc & {
+        font-size: $text-title-xs;
+    }
 }
 
 .m24-c-gallery-tile-link {
@@ -71,8 +87,9 @@
 
     &:hover,
     &:focus,
-    &:active {
-        color: $m24-color-dark-green;
+    &:active,
+    &:visited:hover {
+        color: inherit;
         text-decoration: underline;
     }