Small FWE CSS tweak (#12994)

On screens smaller than 500px wide, images were wider than the viewport.

## Presubmit checklist

- [x] If you are unwilling, or unable, to sign the CLA, even for a
_tiny_, one-word PR, please file an issue instead of a PR.
- [x] If this PR is not meant to land until a future stable release,
mark it as draft with an explanation.
- [x] This PR follows the [Google Developer Documentation Style
Guidelines](https://developers.google.com/style)—for example, it doesn't
use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first-person
pronouns).
- [x] This PR uses [semantic line
breaks](https://github.com/dart-lang/site-shared/blob/main/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks)
  of 80 characters or fewer.

---------

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: ericwindmill

site/lib/_sass/components/_tutorial_pages.scss

@@ -28,8 +28,19 @@
     margin: 3rem 1rem;
   }
 
-  img {
+  img  {
     display:flex;
     justify-self: center;
+    max-width: 500px;
+    width: 100%;
   }
 }
+
+// Images are centered and have a 
+// max width of 500px within the /learn directory
+.learn-image-wrapper {
+    display: block;
+    margin: 0 auto;
+    max-width: 500px;
+    width: 100%;
+  }

src/content/learn/index.md

@@ -6,7 +6,7 @@ showToc: false
 ---
 
 <img src='/assets/images/docs/learn/learn-flutter-anyway.png' 
-    alt="An image of Dash in front of a blackboard." class="image-wrapper" style="max-width: 500px; display:flex; justify-self: center;"> 
+    alt="An image of Dash in front of a blackboard." class="image-wrapper learn-image-wrapper">
 
 ## For beginners
 

src/content/learn/pathway.md

@@ -39,7 +39,7 @@ Deepen your understanding of how Flutter works under the hood by watching this v
 
 </Stepper>
 
-<img src="/assets/images/docs/learn/beginner.jpg" alt="Dash with question marks around her; looking curious." class="image-wrapper" style="max-width: 500px; display:flex; justify-self: center;">
+<img src="/assets/images/docs/learn/beginner.jpg" alt="Dash with question marks around her; looking curious." class="image-wrapper learn-image-wrapper">
 
 
 

src/content/learn/tutorial/index.md

@@ -28,7 +28,7 @@ If either of those aren't true, please start at the [Learning pathway page](/lea
 
 </div>
   <div class="centered-rows">
-    <DashImage figure image="learn/tutorial-hero.png" alt="Dash with magnifying glass" img-style="max-width: 500px;" />
+    <DashImage figure image="learn/tutorial-hero.png" alt="Dash with magnifying glass" img-class="learn-image-wrapper" />
   </div>
 </div>