Use rem for image sizing (#23008)

Co-authored-by: Grace Park <[email protected]>

Author: heiskr

stylesheets/images.scss

@@ -1,27 +1,28 @@
 .markdown-body .procedural-image-wrapper {
   display: block;
-  padding: 10px 0;
-  margin: 20px auto 0 auto;
+  padding: 1rem 0;
+  margin: 1rem auto 0 auto;
   border: none;
-  max-width: calc(100% - 32px);
-}
+  max-width: calc(100% - 2rem);
 
-.markdown-body .procedural-image-wrapper img {
-  width: auto;
-  height: auto;
-  max-height: 500px;
-  padding: 0;
-  box-shadow: var(--color-shadow-medium);
-}
+  img {
+    width: auto;
+    height: auto;
+    max-height: 32rem;
+    padding: 0;
+    box-shadow: var(--color-shadow-medium);
+  }
 
-// make sure images that contain emoji render at the expected size
-.markdown-body img[src*="https://github.githubassets.com/images/icons/emoji"]
-{
-  height: 20px;
-  width: 20px;
+  // make sure images that contain emoji render at the expected size
+  img[src*="https://github.githubassets.com/images/icons/emoji"]
+  {
+    height: 20px;
+    width: 20px;
+    box-shadow: none;
+  }
 }
 
 .markdown-body img {
-  max-height: 500px;
+  max-height: 32rem;
   padding: 0;
 }