Fix placeholders in SummonUnit

components/summon/SummonUnit/index.module.scss

@@ -26,7 +26,7 @@
       min-height: 15.9vw;
     }
 
-    .image {
+    .content {
       list-style-type: none;
       width: 100%;
     }
@@ -36,19 +36,35 @@
     margin-right: 0;
   }
 
-  &.main.editable .image:hover,
-  &.friend.editable .image:hover {
+  &.main.editable .content:hover,
+  &.friend.editable .content:hover {
     transform: $scale-tall;
   }
 
-  &.editable .image:hover {
+  &.editable .content:hover {
     border: $hover-stroke;
     box-shadow: $hover-shadow;
     cursor: pointer;
     transform: $scale-wide;
   }
 
-  .image {
+  &.subaura {
+    min-height: 0;
+
+    .content {
+      background: var(--subaura-orange-card-bg);
+
+      &:hover .icon svg {
+        fill: var(--subaura-orange-primary);
+      }
+
+      .icon svg {
+        fill: var(--subaura-orange-secondary);
+      }
+    }
+  }
+
+  .content {
     background: var(--card-bg);
     border: 1px solid rgba(0, 0, 0, 0);
     border-radius: $unit;
@@ -108,7 +124,7 @@
     width: 100%;
     z-index: 2;
 
-    &.Placeholder {
+    &.placeholder {
       opacity: 0;
     }
   }

components/summon/SummonUnit/index.tsx

@@ -67,6 +67,7 @@ const SummonUnit = ({
     [styles.main]: unitType == 0,
     [styles.grid]: unitType == 1,
     [styles.friend]: unitType == 2,
+    [styles.subaura]: position == 4 || position == 5,
     [styles.editable]: editable,
     [styles.filled]: gridSummon !== undefined,
   })
@@ -284,15 +285,15 @@ const SummonUnit = ({
       <img
         alt={summon?.name[locale]}
         className={classNames({
-          GridImage: true,
-          Placeholder: imageUrl === '',
+          [styles.image]: true,
+          [styles.placeholder]: imageUrl === '',
         })}
         src={imageUrl !== '' ? imageUrl : placeholderImageUrl()}
       />
     )
 
     const content = (
-      <div className={styles.image} onClick={openSearchModal}>
+      <div className={styles.content} onClick={openSearchModal}>
         {image}
         {editable ? (
           <span className={styles.icon}>