From 1489ff827a206b31a6d90fd7ad8b8a911332f0d0 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Tue, 28 Feb 2023 14:12:18 +0200
Subject: [PATCH] Remove background-color from image to allow opacity

---
 .../BlockBuilder/BlockDefault/BlockDefault.module.css       | 1 -
 src/containers/PageBuilder/Primitives/Image/Image.js        | 2 +-
 .../PageBuilder/Primitives/Image/Image.module.css           | 6 +++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/containers/PageBuilder/BlockBuilder/BlockDefault/BlockDefault.module.css b/src/containers/PageBuilder/BlockBuilder/BlockDefault/BlockDefault.module.css
index 41409affe7..3303711475 100644
--- a/src/containers/PageBuilder/BlockBuilder/BlockDefault/BlockDefault.module.css
+++ b/src/containers/PageBuilder/BlockBuilder/BlockDefault/BlockDefault.module.css
@@ -3,7 +3,6 @@
 
 .media {
   width: 100%;
-  background-color: var(--matterColorNegative); /* Loading state color for the images */
   border-radius: 8px;
   margin-bottom: 0;
 }
diff --git a/src/containers/PageBuilder/Primitives/Image/Image.js b/src/containers/PageBuilder/Primitives/Image/Image.js
index 9268b6ff5b..7098e20070 100644
--- a/src/containers/PageBuilder/Primitives/Image/Image.js
+++ b/src/containers/PageBuilder/Primitives/Image/Image.js
@@ -40,7 +40,7 @@ export const FieldImage = React.forwardRef((props, ref) => {
   const firstImageVariant = variants[variantNames[0]];
   const { width: aspectWidth, height: aspectHeight } = firstImageVariant || {};
 
-  const classes = classNames(rootClassName || css.markdownImage, className);
+  const classes = classNames(rootClassName || css.fieldImage, className);
   return (
     <AspectRatioWrapper className={classes} width={aspectWidth || 1} height={aspectHeight || 1}>
       <ResponsiveImage
diff --git a/src/containers/PageBuilder/Primitives/Image/Image.module.css b/src/containers/PageBuilder/Primitives/Image/Image.module.css
index 6dee56d59f..246be44c86 100644
--- a/src/containers/PageBuilder/Primitives/Image/Image.module.css
+++ b/src/containers/PageBuilder/Primitives/Image/Image.module.css
@@ -1,5 +1,9 @@
 .markdownImage {
-  width: 100%;
+  /**
+   * Note: markdown images might be too small for filling the space.
+   */
+  width: auto;
+  max-width: 100%;
   border-radius: 8px;
   object-fit: cover;
 }