Refresh: add fly-apart animation to showcase [#15304]

bedrock/mozorg/templates/mozorg/home/includes/m24/showcase.html

@@ -12,17 +12,40 @@ <h2 class="m24-c-showcase-title">The Rise25 Awards</h2>
     </header>
 
     <div class="m24-c-showcase">
-      <div class="m24-c-showcase-media">
+      <div class="m24-c-showcase-media m24-t-media-three">
         {{ resp_img(
-          url='img/home/2024/rise25-static.png',
-          srcset={
-            'img/home/2024/rise25-static-high-res.png': '1.5x'
-          },
+          url='img/home/2024/rise25-one.jpg',
+          srcset={'img/home/2024/rise25-one-high-res.jpg': '1.5x'},
           optional_attributes={
             'loading': 'lazy',
-            'width': '500',
-            'height': '500',
+            'width': '360',
+            'height': '360',
             'alt': '',
+            'class': 'm24-c-showcase-image image-one',
+          }
+        ) }}
+
+        {{ resp_img(
+          url='img/home/2024/rise25-two.jpg',
+          srcset={'img/home/2024/rise25-two-high-res.jpg': '1.5x'},
+          optional_attributes={
+            'loading': 'lazy',
+            'width': '360',
+            'height': '360',
+            'alt': '',
+            'class': 'm24-c-showcase-image image-two',
+          }
+        ) }}
+
+        {{ resp_img(
+          url='img/home/2024/rise25-three.jpg',
+          srcset={'img/home/2024/rise25-three-high-res.jpg': '1.5x'},
+          optional_attributes={
+            'loading': 'lazy',
+            'width': '360',
+            'height': '360',
+            'alt': '',
+            'class': 'm24-c-showcase-image image-three',
           }
         ) }}
       </div>

media/css/m24/showcase.scss

@@ -20,6 +20,84 @@
     text-align: center;
     padding: $spacer-xl 0;
     position: relative;
+
+    &.m24-t-media-two .m24-c-showcase-image {
+        margin: 0 calc($grid-gutter / 2) calc($grid-gutter / 2);
+    }
+
+    &.m24-t-media-three {
+        height: 180px;
+        margin-bottom: $spacer-lg;
+
+        .m24-c-showcase-image {
+            width: 180px;
+            position: absolute;
+            left: 50%;
+            margin-left: -90px;
+
+            &.image-one {
+                transform: translate(60px, 30px);
+            }
+
+            &.image-two {
+                transform: translate(-60px, 0);
+            }
+
+            &.image-three {
+                transform: translate(0, -30px);
+            }
+        }
+    }
+}
+
+@media #{$mq-sm} {
+    .m24-c-showcase-media.m24-t-media-three {
+        height: 240px;
+
+        .m24-c-showcase-image {
+            width: 240px;
+            position: absolute;
+            left: 50%;
+            margin-left: -120px;
+
+            &.image-one {
+                transform: translate(80px, $spacer-xl);
+            }
+
+            &.image-two {
+                transform: translate(-80px, 0);
+            }
+
+            &.image-three {
+                transform: translate(0, calc($spacer-xl * -1));
+            }
+        }
+    }
+}
+
+@media #{$mq-md} {
+    .m24-c-showcase-media.m24-t-media-three {
+        height: 360px;
+
+        .m24-c-showcase-image {
+            width: 360px;
+            position: absolute;
+            left: 50%;
+            margin-left: -180px;
+
+            &.image-one {
+                transform: translate(160px, $spacer-xl);
+            }
+
+            &.image-two {
+                transform: translate(-160px, 0);
+            }
+
+            &.image-three {
+                transform: translate(0, calc($spacer-xl * -1));
+            }
+        }
+    }
 }
 
 @media #{$mq-lg} {
@@ -36,3 +114,34 @@
         }
     }
 }
+
+@media #{$mq-lg} and (prefers-reduced-motion: no-preference) {
+    .m24-c-showcase-media.m24-t-media-three {
+        .m24-c-showcase-image {
+            transition:
+                transform 300ms 500ms cubic-bezier(.5,0,0,1),
+                left 300ms 500ms cubic-bezier(.5,0,0,1),
+                margin-left 300ms 500ms cubic-bezier(.5,0,0,1);
+        }
+
+        &:hover {
+            .m24-c-showcase-image {
+                &.image-one {
+                    transform: translate(0, -60px);
+                    left: 100%;
+                    margin-left: -360px;
+                }
+
+                &.image-two {
+                    transform: translate(0, -60px);
+                    left: 0;
+                    margin-left: 0;
+                }
+
+                &.image-three {
+                    transform: translate(0, 60px);
+                }
+            }
+        }
+    }
+}