Adjust delete overlay dimming, sizing, and object card composition

styles/27-patterns-delete-confirmation.css

@@ -12,7 +12,17 @@
 }
 
 .sg-delete-confirmation-pattern__target {
-  filter: brightness(var(--layout-delete-confirmation-target-dim-factor));
+  position: relative;
+  overflow: hidden;
+}
+
+.sg-delete-confirmation-pattern__target::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--color-dark-grey);
+  opacity: var(--layout-delete-confirmation-target-dim-opacity);
+  pointer-events: none;
 }
 
 .sg-delete-confirmation-pattern__floating-card {
@@ -20,7 +30,7 @@
   top: var(--layout-delete-confirmation-overlay-offset-block-start);
   left: 50%;
   transform: translateX(-50%);
-  width: min(100%, var(--layout-delete-confirmation-overlay-max-width));
+  width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);
 }
@@ -53,13 +63,10 @@
   display: flex;
   justify-content: flex-end;
   gap: var(--layout-delete-confirmation-actions-gap);
+  margin-top: var(--layout-delete-confirmation-actions-offset-block-start);
 }
 
 @media (max-width: 48rem) {
-  .sg-delete-confirmation-pattern__floating-card {
-    width: 100%;
-  }
-
   .sg-delete-confirmation-pattern__actions {
     flex-wrap: wrap;
   }