Second edits: border color, image changes

assets/common/styles/pages/blog.scss

@@ -33,6 +33,11 @@
   margin-inline-end: 10%;
 }
 
+.post-article figure.no-margin  {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
 .post-article blockquote,
 .post-article .testimonial-blockquote {
   @include u-font('sans', 'lg');

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

@@ -47,16 +47,12 @@ each other and their environments. This helps us narrate stories about the
 world we want to build.
 
 
-<figure>
+<figure class="no-margin">
 <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>
@@ -75,7 +71,7 @@ Consider this simple presentation slide.
 
 <figure>
 
-{% image_with_class "assets/blog/18f-folks/slide-confused.png" "border border-ink" "A presentation slide showing a list on the left of common timekeep mistakes. Next to the list is a shrugging woman in the style of 18F Folks cartoon." %}
+{% image_with_class "assets/blog/18f-folks/slide-confused.png" "border border-base-lighter" "A presentation slide showing a list on the left of common timekeep mistakes. Next to the list is a shrugging woman in the style of 18F Folks cartoon." %}
 
 </figure>
 
@@ -96,7 +92,7 @@ several illustration libraries. Open Peeps was selected as the basis of the
 <em>18F Folks</em> style because it balances professional with approachable.
 
 <figure>
-{% image_with_class "assets/blog/18f-folks/scorecard.png" "border border-ink" "A spreadsheet grid. The left column has criteria such as open source, matches 18F's voice, etc. The following columns determine if different visual libraries meet the criteria.  Green, yellow, and red cells suggest if criteria are met or not." %}
+{% image_with_class "assets/blog/18f-folks/scorecard.png" "border border-base-lighter" "A spreadsheet grid. The left column has criteria such as open source, matches 18F's voice, etc. The following columns determine if different visual libraries meet the criteria.  Green, yellow, and red cells suggest if criteria are met or not." %}
 
 <figcaption>We created a scorecard to narrow down our options for an
 illustration library</figcaption>
@@ -106,16 +102,16 @@ Product managers compiled a list of additional characteristics to make the 18F
 Folks library even more inclusive. Considerations included diverse religious
 dress, physical abilities, and body types.
 
-<figure>
+<figure class="no-margin">
 
 <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." %}
+{% image "assets/blog/18f-folks/custom2.png" "A pregnant woman stands next to a child in 18F Folks illustration style" %}
 </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" %}
+{% 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>