.dropzone-component {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: $toolbar-total-height $grid-gutter-width-half 0;

  .gallery--has-editor & {
    @include media-breakpoint-up(md) {
      width: calc(100% - #{$cms-panel-sm + 20px});
    }

    @include media-breakpoint-up(xl) {
      margin-right: calc(100% - #{$cms-panel-md + 20px});
    }
  }

  &::after {
    position: absolute;
    top: -70px;
    right: #{0 - $grid-gutter-width / 2};
    bottom: 0;
    left: #{0 - $grid-gutter-width / 2};
    background: $page-mask-light
      url("#{$framework-path}/admin/client/dist/images/drag_drop_opt.svg") center center no-repeat;
    background-size: 312px 325px;
    z-index: 100;
  }

  &.dragging {
    &::after {
      content: "";
    }
  }
}

.dropzone-component {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: $toolbar-total-height $grid-gutter-width-half 0;

  &::after {
    position: absolute;
    top: -70px;
    right: #{0 - $grid-gutter-width / 2};
    bottom: 0;
    left: #{0 - $grid-gutter-width / 2};
    background: $page-mask-light
      url("#{$framework-path}/admin/client/dist/images/drag_drop_opt.svg") center center no-repeat;
    background-size: 312px 325px;
    z-index: 100;
  }

  &.dragging {
    &::after {
      content: "";
    }
  }
}

.editor + .gallery__main .dropzone-component {
  @include media-breakpoint-up(lg) {
    width: calc(100% - #{$cms-panel-sm} - #{$grid-gutter-width});
  }

  @include media-breakpoint-up(xl) {
    width: calc(100% - #{$cms-panel-md} - #{$grid-gutter-width});
  }
}

Adjust width depending on whether editor is visible and screen size
Adjust width depending on whether editor is visible and screen size
