Responsive figure layout for desktop vs. mobile

content/posts/2024-10-21-18f-folks.md

@@ -46,13 +46,22 @@ With <em>18F Folks</em>, we’re able to construct vignettes of people interacti
 each other and their environments. This helps us narrate stories about the
 world we want to build.
 
-<figure>
 
+<figure>
+<div class="grid-row">
+<div class="grid-col-12 desktop:grid-col">
 {% image "assets/blog/18f-folks/dc-walking.png" "A cartoon vignette with two people walking, with government buildings and trees in the background" %}
+</div>
 
+<div class="grid-col-12 desktop:grid-col">
 {% image "assets/blog/18f-folks/error.png" "A cartoon of a woman looking worried while holding a phone. A large phone is next to her, showing an X on the screen" %}
+</div>
 
+<div class="grid-col-12 desktop:grid-col">
 {% image "assets/blog/18f-folks/us-map.png" "Two people standing in front of a map of the US. One person appears pregnant, the other has a prosthetic leg." %}
+</div>
+</div>
+
   <figcaption>The illustration library can showcase diversity, connection, and context</figcaption>
 </figure>
 
@@ -98,9 +107,18 @@ Folks library even more inclusive. Considerations included diverse religious
 dress, physical abilities, and body types.
 
 <figure>
+
+<div class="grid-row">
+
+<div class="grid-col-12 desktop:grid-col">
 {% image "assets/blog/18f-folks/custom.png" "Two cartoon characters talking.  One wears a shirt with 18F, the other a shirt with a rainbow flag." %}
+</div>
 
+<div class="grid-col-12 desktop:grid-col">
 {% image "assets/blog/18f-folks/custom2.png" "A pregnant woman stands next to a child in 18F Folks illustration style" %}
+</div>
+
+</div>
 
 <figcaption>
 We added custom shirts, a hearing aid, as well as a pregnant person and a