Hack: Disable img box-shadow in case studies

src/templates/CaseStudy.js

@@ -9,7 +9,23 @@ import {
 } from 'components/actions/SubscribeToNewsletter';
 
 const useStyles = createUseStyles((theme) => ({
-  main: theme.preMadeStyles.content,
+  main: {
+    ...theme.preMadeStyles.content,
+
+    '& .gatsby-resp-image-wrapper': {
+      // This is a complete hack that I (David) am putting in place because I need to publish
+      // the newsletter and I don't have time to fix this properly.
+      //
+      // The Gatsby Remark images plugin is adding a box-shadow to all images it renders by
+      // default. See gatsby-config.js to see how this happens. In most cases, this looks
+      // great. However, the Lunar team supplied me with images which already have a box shadow
+      // on them. It looks terrible when they are wrapped in a second shadow.
+      //
+      // My hack is to force box shadow off for all case-studies. Later I can come up with
+      // a more nuanced approach.
+      boxShadow: 'none !important',
+    },
+  },
 }));
 
 const MAX_WIDTH_BREAKPOINT = 'md';

src/theme.js

@@ -70,7 +70,7 @@ const theme = {
       //
       // I've also disabled margin-left:auto because there are some situations where we
       // need images to be against the left edge. Docs are a good example of this.
-      wrapperStyle: 'box-shadow:0 0 5px -2px rgba(0,0,0,0.75); margin-left:unset; margin-right:unset',
+      wrapperStyle: 'box-shadow: 0 0 5px -2px rgba(0,0,0,0.75); margin-left:unset; margin-right:unset',
     },
 
     // These styles are set on the root element of HTML nodes which have compiled Markdown injected