From 95013a8fec11703848dc6f2e699cfae02bd36ee5 Mon Sep 17 00:00:00 2001
From: Ans <git@anselmbradford.com>
Date: Fri, 29 Mar 2024 17:37:31 -0400
Subject: [PATCH] Create `m-full-width-media` modifier and caption element

---
 cfgov/unprocessed/css/molecules/full-width-media.less    | 9 +++++++++
 cfgov/v1/jinja2/v1/includes/molecules/content-image.html | 4 ++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/cfgov/unprocessed/css/molecules/full-width-media.less b/cfgov/unprocessed/css/molecules/full-width-media.less
index 4017bed81b0..3a61062643d 100644
--- a/cfgov/unprocessed/css/molecules/full-width-media.less
+++ b/cfgov/unprocessed/css/molecules/full-width-media.less
@@ -1,5 +1,14 @@
 .m-full-width-media {
+  &__bottom-rule {
+    padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
+    border-bottom: 1px solid @horizontal-rule;
+  }
+
   &_image {
     display: block;
   }
+
+  &_caption {
+    margin-top: unit(15px / @base-font-size-px, rem);
+  }
 }
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/content-image.html b/cfgov/v1/jinja2/v1/includes/molecules/content-image.html
index 3c41030495f..6bab3032356 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/content-image.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/content-image.html
@@ -38,12 +38,12 @@
 {%- if value.image_width == 'full' -%}
 
 <figure class="m-full-width-media
-               {{- ' m-inset__bottom-rule' if value.is_bottom_rule else '' }}">
+               {{- ' m-full-width-media__bottom-rule' if value.is_bottom_rule else '' }}">
     <img class="m-full-width-media_image"
          src="{{ image_inset.url }}"
          alt="{{ image_alt_value(value.image) }}">
 {%- if value.text %}
-    <figcaption class="m-inset_caption">
+    <figcaption class="m-full-width-media_caption">
         {{ value.text | safe }}
     </figcaption>
 {%- endif %}