From 95e6a203f8bc2832e9221df2e252b73680314678 Mon Sep 17 00:00:00 2001
From: Tyler Rubach <trubach@illinois.edu>
Date: Mon, 6 Nov 2023 16:13:37 -0600
Subject: [PATCH] Fix for image alignment issues in #807

---
 scss/illinois-framework/_media.scss | 40 +++++++++++++----------------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/scss/illinois-framework/_media.scss b/scss/illinois-framework/_media.scss
index 081cf9c..835a9f7 100644
--- a/scss/illinois-framework/_media.scss
+++ b/scss/illinois-framework/_media.scss
@@ -57,55 +57,51 @@ TODO: Consider making the feature video styles use this responsive video setup.
 }
 
 /*Styles for right and left align media*/
+.il-formatted figure,
 .media,
 .media--type-remote-video {
 
   &.align-left,
   &.align-right {
-    max-width: 50%;
-    padding-bottom: rem(25px);
+    max-width: 40%;
+    padding-bottom: var(--il-content-margin);;
   }
 
   &.align-left {
     justify-content: left;
-    padding-right: rem(20px);
+    padding-right: var(--il-content-margin);;
   }
 
   &.align-right {
     justify-content: right;
-    padding-left: rem(20px);
+    padding-left: var(--il-content-margin);;
   }
 
   &.align-center {
+    max-width: 60%;
     justify-content: center;
     clear: both;
-    padding-bottom: rem(25px);
+    display: block;
+    margin: 0.888889em auto 0;
   }
-}
 
-/*Styles for right and left align media with CKEditor captions*/
-.il-formatted{
-  figure{
-    margin: 0 !important;
-    padding-bottom: 1.5625rem !important;
-    max-width: 50%;
-    &.caption-drupal-media{
-      &.align-left{
-        padding-right: 1.25rem;
-      }
-      &.align-right{
-        padding-left: 1.25rem;
-      }
+  &.align-center {
+    img {
+      width: 100%;
     }
   }
+
   figcaption{
-    font-size: 1em !important;
-    margin: 0.25rem 0 !important;
-    font-style: italic;
+    margin: rem(5px) 0 !important;
     border-bottom: none !important;
   }
 }
 
+/* Remove top margin for embedded image if it's the first element in the body */
+div.field--type-text-with-summary > figure:first-child {
+  margin-top: 0;
+}
+
 /*Styles for media with Media captions*/
 .field--name-field-if-media-image-caption{
   .field__item{