From b0c837d220ed35a9d55b5107ba10fe3f349f2ed2 Mon Sep 17 00:00:00 2001
From: berliner <berliner@dev030.com>
Date: Thu, 23 Nov 2023 00:44:30 +0100
Subject: [PATCH] HPC-9292: Update styles for embedded stories

---
 .../components/gho-story/gho-story.css        | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/html/themes/custom/common_design_subtheme/components/gho-story/gho-story.css b/html/themes/custom/common_design_subtheme/components/gho-story/gho-story.css
index 1088eaad9..1f22e617f 100644
--- a/html/themes/custom/common_design_subtheme/components/gho-story/gho-story.css
+++ b/html/themes/custom/common_design_subtheme/components/gho-story/gho-story.css
@@ -52,29 +52,32 @@
 }
 
 .gho-story .field--name-field-media {
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 }
 .gho-story .field--name-field-media .media--view-mode-story {
   position: relative;
 }
-.gho-story .field--name-field-media .media-caption {
-  position: absolute;
-  right: 1rem;
-  bottom: 1rem;
-  max-width: 70%;
-  padding: 0.5rem 1rem;
-  opacity: 0.9;
-  background-color: var(--cd-white);
-  font-size: var(--cd-font-size--tiny);
-}
-.gho-story .field--name-field-media .media-caption * {
+.gho-story .media-caption {
+  padding: 1rem 0 0.5rem 0;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid #fff;
+  color: #fff;
+  font-size: 0.75rem;
+}
+@media (min-width: 768px) {
+  .gho-story .media-caption {
+    font-size: 0.875rem;
+  }
+}
+.gho-story .media-caption * {
   display: inline;
-  color: var(--cd-default-text-color);
 }
-.gho-story .field--name-field-media .media-caption .double-field-first {
-  display: block;
+.gho-story .media-caption .double-field-first {
   font-weight: bold;
 }
+.gho-story .media-caption .field--name-field-caption > *::after {
+  content: ".";
+}
 .gho-story .gho-caption {
   margin: 0;
 }