added styling

src/components/Logo/View.jsx

@@ -29,6 +29,7 @@ const View = (props) => {
         <img
           src={flattenToAppURL(`${logo["@id"]}/@@images/image/teaser`)}
           alt="placeholder"
+          className="logo-image"
         />
       )}
       <h3 className="logo-heading headline">{data.heading}</h3>

src/index.js

@@ -5,6 +5,8 @@ import { LogoBlockSchema } from "./components/Logo/schema";
 
 import freedomSVG from "@plone/volto/icons/freedom.svg";
 
+import "./theme/main.less";
+
 const applyConfig = (config) => {
   config.blocks.blocksConfig.logo = {
     id: "logo",
@@ -28,6 +30,9 @@ const applyConfig = (config) => {
     allowedBlocks: ["logo"],
     sidebarTab: 1,
   };
+  config.blocks.blocksConfig.logos.blocksConfig = {
+    ...config.blocks.blocksConfig,
+  };
   console.log(config);
   return config;
 };

src/theme/main.less

@@ -0,0 +1,82 @@
+@blueArctic: #e2f1fd;
+@greySnow: #f3f5f7;
+@greySmoke: #e4e8ec;
+
+.block.logos {
+  .grid-items [data-rbd-droppable-id] {
+    display: flex;
+  }
+
+  // general spacing in the Row block wrapper
+  & [class^="block-editor-"],
+  [class^="block-editor-"].contained {
+    padding-right: 1rem;
+    padding-left: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .one.grid-items [class^="block-editor-"] {
+    width: 100%;
+  }
+
+  .two.grid-items [class^="block-editor-"] {
+    width: 50%;
+  }
+
+  .three.grid-items [class^="block-editor-"] {
+    width: 33.33333333%;
+  }
+
+  .four.grid-items [class^="block-editor-"] {
+    width: 25%;
+  }
+
+  .ui.basic.button.remove-block-button {
+    position: absolute;
+    z-index: 3;
+    top: 6px;
+    right: 2px;
+    display: none;
+
+    .icon {
+      height: 18px !important;
+    }
+
+    .circled {
+      padding: 8px;
+      border: 1px solid @greySmoke;
+      background: @greySnow;
+
+      &:hover {
+        background-color: @greySmoke;
+      }
+    }
+
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+
+  [class^="block-editor-"].selected .ui.basic.button.remove-block-button,
+  [class^="block-editor-"]:hover .ui.basic.button.remove-block-button {
+    display: block;
+  }
+
+  .cell-wrapper {
+    position: relative;
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  .logo-image {
+    width: 100%;
+  }
+}
+
+.block.logo {
+  .logo-image {
+    width: 100%;
+    object-position: top left;
+  }
+}