Figure style media query, placeholder imgs

Author: LanesGood

docs/src/overrides/assets/stylesheets/home.css

@@ -156,6 +156,9 @@ section + section {
   margin: 1rem 0;
   gap: 1rem;
 }
+.figure-collection figure img {
+  max-width: 100%;
+}
 
 .text-centered {
   text-align: center;
@@ -191,17 +194,6 @@ section + section {
     grid-template-columns: repeat(var(--cols), minmax(10px, 1fr));
   }
 
-  .figure-collection figure {
-    flex-flow: row nowrap;
-  }
-
-  .figure-collection figure > * {
-    flex: 1;
-  }
-
-  .figure-collection figure > :first-child {
-    order: var(--figureOrder);
-  }
 
   .width-160 {
     max-width: 160ch;
@@ -212,7 +204,18 @@ section + section {
   .tx-hero {
     padding: 4rem 1rem 6rem;
   }
+  .figure-collection figure {
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
 
+  .figure-collection figure > * {
+    flex: 1;
+  }
+
+  .figure-collection figure > :first-child {
+    order: var(--figureOrder);
+  }
   .md-typeset h2 {
     font-size: 2rem;
     line-height: 2.5rem;

docs/src/overrides/home.html

@@ -186,8 +186,7 @@ <h1>Control and Customization
                 <div class="figure-collection">
                     <figure>
                         <a href="how-to-guides/huggingface/pipeline/nlp/translation/">
-                            <img src="assets/images/examples/translate-app.png" alt="Built-in search" loading="lazy"
-                                width="500" height="327">
+                            <img src="https://placehold.co/600x300" alt="Alt text" loading="lazy">
                         </a>
                         <figcaption class="md-typeset">
                             <h2>Ingest any STAC Collection</h2>
@@ -204,8 +203,7 @@ <h2>Ingest any STAC Collection</h2>
                     <figure>
                         <a href="how-to-guides/huggingface/pipeline/nlp/translation/" title="GUI"
                             style="--figureOrder: 1;">
-                            <img src="assets/images/examples/translation-gui.png" alt="GUI" loading="lazy" width="500"
-                                height="327">
+                            <img src="https://placehold.co/600x300" alt="Alt text" loading="lazy">
                         </a>
                         <figcaption class="md-typeset">
                             <h2>Download and Deploy</h2>
@@ -219,8 +217,7 @@ <h2>Download and Deploy</h2>
                     </figure>
                     <figure>
                         <a href="reference/restapi/" title="swagger-ui" tabindex="-1">
-                            <img src="assets/images/swagger-ui.jpg" alt="swagger-ui" loading="lazy" width="500"
-                                height="327">
+                            <img src="https://placehold.co/600x300" alt="Alt text" loading="lazy">
                         </a>
                         <figcaption class="md-typeset">
                             <h2>Raster Vector, faster connector</h2>
@@ -265,16 +262,19 @@ <h1><mark>We believe</mark> that the <mark>community</mark> of people who would
                 <header class="md-typeset text-centered">
                     <h5 id="eoapi-in-action" class="supheading">eoAPI in action</h5>
                 </header>
-                <figure>
-                    <figcaption class="md-typeset">
-                        <h3>NASA IMPACT’s VEDA Project</h3>
-                        <p>NASA IMPACT is leading the way for how NASA (and space agencies worldwide) can increase the
-                            societal impact of their data through cloud-optimized data distribution. They’ve invested
-                            significant resources in advancing modern public EO data standards, tools, and platforms.
-                            You
-                            can see eoAPI services in action across</p>
-                    </figcaption>
-                </figure>
+                <div class="figure-collection">
+                    <figure>
+                        <figcaption class="md-typeset">
+                            <h3>NASA IMPACT’s VEDA Project</h3>
+                            <p>NASA IMPACT is leading the way for how NASA (and space agencies worldwide) can increase the
+                                societal impact of their data through cloud-optimized data distribution. They’ve invested
+                                significant resources in advancing modern public EO data standards, tools, and platforms.
+                                You
+                                can see eoAPI services in action across</p>
+                        </figcaption>
+                        <img src="https://placehold.co/600x300" alt="Alt text" loading="lazy">
+                    </figure>
+                </div>
             </div>
         </div>
     </section>