.image-upload-control {
  --_co-image-upload-control-color-border: var(--op-color-neutral-plus-four);
  --_co-image-upload-control-spacing: var(--op-space-x-small);

  display: grid;
  grid-template-columns: 1fr;
  box-shadow: var(--op-border-all) var(--_co-image-upload-control-color-border);
  border-radius: var(--op-radius-medium);
  row-gap: var(--_co-image-upload-control-spacing);
  padding: var(--_co-image-upload-control-spacing);
  grid-column: 1 / 3;

  .image-upload-control__preview {
    border: var(--op-border-width) dashed var(--_co-image-upload-control-color-border);
    border-radius: var(--op-radius-small);
    inline-size: 100%;
    min-block-size: calc(var(--_co-cover-image-height) / 2);
    max-block-size: calc(var(--_co-cover-image-height) / 1.5);

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .image-upload-control__placeholder {
    position: absolute;

    font-size: var(--op-font-large);
    color: var(--op-color-on-background-alt);
    font-weight: var(--op-font-weight-semi-bold);
    z-index: 1;
  }

  .image-upload-control__preview-image {
    z-index: 2;
    object-fit: cover;
    object-position: center;

    &.image-upload-control__preview-image--populated {
      inline-size: 100%;
      block-size: 100%;
    }
  }
}