Update the /students CS stories pods; switch to 2-wide layout

src/app/components/elements/cards/AdaCard.tsx

@@ -25,7 +25,9 @@ export const AdaCard = ({card, ...props}: AdaCardProps) => {
     const {title, image, bodyText, clickUrl, buttonText, buttonStyle, buttonAltText, disabled} = card;
     return <div {...props} className={classNames("cs-card-container", props?.className ?? "")}>
         <Card className={classNames("cs-card border-0", card.className)} tag={buttonStyle === "card" ? Link : Card}>
-            {image && <CardImg src={image.src} alt={image.altText ?? ""} className={image.className ?? ""}/>}
+            {image && <div className="cs-card-image-container">
+                <CardImg src={image.src} alt={image.altText ?? ""} className={image.className ?? ""}/>
+            </div>}
             <div className={classNames("d-flex flex-column h-100", {"pb-4" : !clickUrl || buttonStyle === "card"})}>
                 <CardTitle className="px-4 mt-4">
                     <h3 className="mt-2 mb-0">{title}</h3>

src/app/components/pages/StudentResources.tsx

@@ -175,25 +175,18 @@ export const StudentResources = () => {
                 </TextBlock>
                 <ColumnSlice className="row-gap-5">
                     <AdaCard card={{
-                        title: "Max Fordham",
-                        image: {src: "/assets/cs/decor/stories/max-fordham.png"},
-                        bodyText: "Explore how Max’s passion for computer science led him to become a software engineer through a digital technology solutions apprenticeship.",
+                        title: "Joe Miles",
+                        image: {src: "/assets/cs/decor/stories/joe-miles.jpg"},
+                        bodyText: "Meet Joe, a passionate computer science educator who shares ideas to keep lessons fun and engaging.",
                         buttonText: "Read more",
-                        clickUrl: "/pages/20240730_max_fordham"
+                        clickUrl: "/pages/20260327_joe_miles"
                     }}/>
                     <AdaCard card={{
-                        title: "Meghna Asthana",
-                        image: {src: "/assets/cs/decor/stories/meghna-asthana.png"},
-                        bodyText: "Discover how Meghna turned her passion for coding into a career in computer vision, where she now works on innovative projects addressing environmental challenges.",
+                        title: "Matt Arnmor",
+                        image: {src: "/assets/cs/decor/stories/matt-arnmor.png"},
+                        bodyText: "Teaching computer science in the age of AI: how Matt Arnmor helps students find confidence and creativity.",
                         buttonText: "Read more",
-                        clickUrl: "/pages/20240313_meghna_asthana"
-                    }}/>
-                    <AdaCard card={{
-                        title: "Lella Halloum",
-                        image: {src: "/assets/cs/decor/stories/lella-halloum.png"},
-                        bodyText: "Meet Lella, a young digital changemaker who uses technology to inspire, engage, and upskill the next generation of talent.",
-                        buttonText: "Read more",
-                        clickUrl: "/pages/20240215_lella_halloum"
+                        clickUrl: "/pages/20260225_matt_arnmor"
                     }}/>
                 </ColumnSlice>
                 <div className="d-flex justify-content-center mt-6">

src/scss/cs/cards.scss

@@ -32,24 +32,29 @@ $cards-per-line: (
   display: flex;
   flex-direction: column;
 
-  > img {
+  > div.cs-card-image-container > img {
     aspect-ratio: 16/9;
     border-radius: 1rem 1rem 0 0;
     object-fit: cover;
   }
 }
 
-@container cs-card (min-width: 560px) {
+@container cs-card (min-width: 760px) {
   .cs-card {
     flex-direction: row-reverse;
 
-    > div {
-      width: 50%;
+    > div:not(.cs-card-image-container) {
+      flex: 1 1 50%;
     }
 
-    > img {
-      width: 50%;
-      border-radius: 0 1rem 3rem 0;
+    > div.cs-card-image-container {
+      flex: 1 0 auto;
+      max-width: 60%;
+      height: 100%;
+      > img {
+        border-radius: 0 1rem 3rem 0;
+        height: 100%;
+      }
     }
   }
 }