tweak image column spacing

18F · Oct 25, 2024 · e4281c3 · e4281c3
1 parent 6350001
commit e4281c3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/assets/blog/18f-folks/us-map.png b/assets/blog/18f-folks/us-map.png
diff --git a/content/posts/2024-10-21-18f-folks.md b/content/posts/2024-10-21-18f-folks.md
@@ -49,11 +49,11 @@ world we want to build.
 
 <figure class="no-margin">
 <div class="grid-row">
-<div class="grid-col-12 desktop:grid-col">
+<div class="grid-col-12 desktop:grid-col-6">
 {% 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">
+<div class="grid-col-12 desktop:grid-offset-1 desktop:grid-col-5">
 {% 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>
@@ -106,12 +106,12 @@ dress, physical abilities, and body types.
 
 <div class="grid-row">
 
-<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 class="grid-col-12 desktop:grid-offset-1 desktop:grid-col-6 display-flex flex-row">
+{% image_with_class "assets/blog/18f-folks/custom2.png" "flex-align-self-center" "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/custom.png" "Two cartoon characters talking.  One wears a shirt with 18F, the other a shirt with a rainbow flag." %}
+<div class="grid-col-12 desktop:grid-col-5">
+{% image "assets/blog/18f-folks/custom.png" "A pregnant woman stands next to a child in 18F Folks illustration style" %}
 </div>
 
 </div>